Redux-thunk配置后fetchit函数无法读取dispatch参数问题排查

已确认正确配置项 #

• thunkMiddleware已添加到applyMiddleware中
• 在mapDispatchToProps中为fetchit注入了dispatch
• fetchit函数定义时已将dispatch设为thunk回调参数

问题根因 #

你在App组件中直接调用的是全局定义的原始fetchit函数，而非通过connect高阶组件注入到props中、已经完成dispatch绑定的封装版fetchit方法。
原始fetchit是符合thunk规范的高阶函数，调用后会返回一个接收dispatch作为入参的函数，这个返回的函数只有被redux thunk中间件捕获执行时，才会自动注入dispatch参数。而只有你调用props中封装后的fetchit时，才会触发mapDispatchToProps中定义的dispatch(fetchit(something))逻辑，让thunk中间件正常工作。

修复方案 #

只需要在App组件中从props内取出封装后的fetchit方法即可：

// 修改前
const App = (props) => {
  if (firstFetch){
    firstFetch = false;
    fetchit();
  }
  // 其余逻辑
}

// 修改后 从props中解构提取绑定好的fetchit
const App = (props) => {
  const { fetchit } = props;
  if (firstFetch){
    firstFetch = false;
    fetchit();
  }
  // 其余逻辑保持不变
}
// 也可以直接在参数位解构
const App = ({ state, fetchit }) => {
  // 逻辑不变
}

修改后调用fetchit时，thunk中间件会自动将dispatch注入到内部回调，就能正常读取到dispatch了。

内容的提问来源于stack exchange，提问作者The S.