React+Redux Thunk中函数dispatch参数的作用？移除后网格异常问题

嘿，我来帮你拆解这个问题，核心其实是Redux Thunk中间件的工作逻辑，以及参数传递的细节～

首先得明确一个关键规则：Redux Thunk中间件在执行你的thunk函数时，会固定把dispatch和getState作为前两个参数传进去，不管你有没有用到它们。

你遇到问题的具体原因 #

假设你去掉dispatch参数后，thunk函数变成了这样：

export const isTest = ( str: String ) => {
  return ( getState: () => ReduxState ): boolean => {
    return getState().id === 5;
  };
};

当你在容器里调用dispatch(isTest("Abc"))时，Redux Thunk仍然会把dispatch作为第一个参数传给这个内部函数——这时候你的getState变量实际上接收到的是dispatch函数，而非真正的state获取方法！

这样一来，getState().id就变成了dispatch.id，但dispatch是函数，根本没有id属性，结果会是undefined === 5，返回false。你的disabledFields就会变成[grid.name]，而非预期的[grid.title]，自然网格就无法正常更新了。

为什么即使不用dispatch也要保留它？ #

虽然你的这个thunk没有分发action，但它本质上是一个需要访问Redux state的thunk。Redux Thunk的作用不止是处理异步action，还允许你编写能读取state、甚至返回值的逻辑——你这里正好用到了返回值来判断禁用哪些字段。

要让getState能正确拿到真正的state获取函数，就必须保证参数位置正确：第一个参数是dispatch（哪怕你不用），第二个才是getState。

小优化建议 #

如果觉得dispatch参数看着别扭，可以用下划线_命名来表明它是占位用的，代码会更清晰：

export const isTest = ( str: String ) => {
  return ( _dispatch: Dispatch<ReduxState>, getState: () => ReduxState ): boolean => {
    return getState().id === 5;
  };
};

内容的提问来源于stack exchange，提问作者Ohhh