React项目中Redux reducer未触发问题排查求助

首先，核心问题出在你的mapDispatchToProps配置里，导致thunk action没有正确被触发：

1. 修正mapDispatchToProps中的调用方式 #

你当前的代码是直接把fetchData函数传递给dispatch，而不是调用它返回thunk函数：

// 错误写法
const mapDispatchToProps = dispatch => {
  return {
    onFetchData: () => dispatch(actions.fetchData),
  }
}

fetchData是一个返回函数的thunk action创建器，你需要调用它，让它返回那个包含异步逻辑的函数，再传递给dispatch：

// 正确写法
const mapDispatchToProps = dispatch => {
  return {
    onFetchData: () => dispatch(actions.fetchData()), // 这里添加()调用fetchData
  }
}

这样redux-thunk中间件才能识别并执行这个异步action，进而触发setBalance和对应的reducer分支。

2. 检查Reducer中的数据结构处理 #

从你的代码看，你在reducer里写了action.donnees.data，但在fetchData中你dispatch的是setBalance(response.data)——如果你的后端接口/movements.json返回的直接是需要处理的收支数据（比如firebase那种键值对结构），而不是嵌套在data字段里的对象，那这里会导致action.donnees.data为undefined，进而无法正确计算总和。你需要调整reducer中的数据获取逻辑：

const setBalance = (state, action) => {
  let fetchedMvts = []
  // 去掉.data，直接遍历action.donnees
  for(let key in action.donnees) {
    fetchedMvts.push({...action.donnees[key]})
  }
  // ... 后续求和逻辑不变
}

3. 额外验证点 #

• 确保已经正确安装了redux-thunk：执行npm install redux-thunk（如果还没安装的话），你的store配置已经添加了这个中间件，这部分是正确的。
• 检查axios请求是否成功：你已经在fetchData里打印了response.data，确认这个数据的结构是否符合你的预期，比如是否包含type和amount字段。

完成以上修改后，你的reducer应该就能正确匹配SET_BALANCE的action type，进而更新incomes和expenses状态了。

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