Redux reducer仅返回初始状态问题排查，附reducer、action相关代码示例

可能的原因及对应解决方案 #

• 未正确配置redux-thunk中间件
  你使用的fetchData是异步action creator，返回的是函数而非普通action对象，原生Redux默认仅支持dispatch纯对象类型的action，没有引入redux-thunk中间件的情况下，这个异步函数不会被执行，后续对应状态修改的action也不会被触发，reducer自然只会返回初始状态。
  你可以检查store的配置代码，确认是否已经注册了thunk中间件，示例配置参考：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { reducer } from './reducer';

const store = createStore(reducer, applyMiddleware(thunk));

• Reducer挂载层级不匹配
  如果你使用了combineReducers合并多个reducer，需要确认你挂载当前todo reducer对应的key，以及你取值时的路径是否匹配。比如你将reducer注册为todo模块，那么取值时需要通过state.todo.todos获取，直接取state.todos只会拿到全局state下不存在的字段，看起来就像只返回初始值。
• 未正确触发异步action
  确认你在组件中是否有正确调用dispatch(fetchData())，比如在组件挂载的useEffect中执行触发请求的逻辑，没有调用该方法的情况下不会有任何对应action被分发到reducer。
• 请求异常或类型不匹配
  检查控制台网络面板，确认http://localhost:5000/read请求是否正常返回，你代码中catch分支直接将整个err对象作为payload传递，但是action类型定义中fail的payload要求为string，类型不匹配可能会导致dispatch失败，建议修改为payload: err.message。
• action类型匹配错误
  检查三处代码中的actionTypes枚举值拼写是否完全一致，若存在拼写错误会导致reducer的case匹配失败，永远走default分支返回初始状态。

额外优化建议 #

你当前的reducer逻辑中，请求成功/失败后没有重置loading状态，会导致loading一直为true，可以修改对应case：

case actionTypes.FETCHING_SUCCESS:
  return {
    ...state,
    loading: false,
    todos: action.payload,
  };
case actionTypes.FETCHING_FAIL:
  return {
    ...state,
    loading: false,
    err: action.payload,
  };

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