为什么useEffect Hook在组件首次渲染时未调用内部的Redux action函数？

问题原因与解决方案 #

你遇到的是Redux thunk类action未正确执行的典型问题，按以下步骤排查即可解决： #

1. 首要检查：是否正确配置redux-thunk中间件 #

你的readTodos是一个返回函数的thunk类型action creator，Redux默认只能处理普通对象类型的action，必须配置redux-thunk中间件才能让dispatch执行返回的函数。
检查你的store配置代码，确保和以下逻辑一致：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './你的根reducer路径';

// 必须把thunk传入applyMiddleware注册到store
const store = createStore(rootReducer, applyMiddleware(thunk));

如果没有加applyMiddleware(thunk)，你调用readTodos()只会返回内部的dispatch函数，不会执行实际的状态更新逻辑，这是90%以上同类问题的诱因。

2. 检查todo reducer是否正确处理readTodo类型的action #

确认你的todo reducer中存在对应readTodo类型的分支，且返回的是全新的状态对象（不能直接修改原state），参考示例：

// 初始状态要和你读取的结构匹配
const initialTodoState = {
  Completed: [],
  Inprogress: []
}

const todoReducer = (state = initialTodoState, action) => {
  switch(action.type) {
    // type字符串必须和action里的完全一致，注意大小写
    case "readTodo":
      return {
        ...state,
        Completed: action.payload.Completed,
        Inprogress: action.payload.Inprogress
      }
    default:
      return state;
  }
}

如果reducer中没有对应处理逻辑，就算action正确dispatch，Redux状态也不会更新，组件自然拿不到数据。

3. 排查绑定与本地存储逻辑 #

如果前两步都确认无误，按以下方式定位问题：

• 在readTodos函数开头、内部dispatch的位置分别加日志，确认执行顺序：

  export const readTodos = () =>{
      console.log("readTodos被调用")
      var mystorage = window.localStorage;
      var Completed = JSON.parse(mystorage.getItem("completed")|| "[]");
      var Inprogress = JSON.parse(mystorage.getItem("inprogress")|| "[]");
      var todolist={ Completed, Inprogress }
      console.log("读取到的本地数据：", todolist)
      return (dispatch:Dispatch) =>{
          console.log("thunk内部dispatch执行")
          dispatch({
              type:"readTodo",
              payload:todolist
          })
      }
  }
  

  • 如果没有readTodos被调用日志：说明你bindActionCreators绑定失败，检查actionCreators对象是否正确导出了readTodos
  • 如果有readTodos被调用但没有thunk内部dispatch执行日志：回到第一步确认thunk中间件配置
  • 如果两个日志都有：检查打印出的本地数据是否有内容，确认你存储待办到localStorage时用的key就是completed和inprogress，大小写完全匹配

另外你也可以不用bindActionCreators，直接在组件中dispatch action，避免绑定出错：

// 组件内修改为如下写法
useEffect(()=>{
  dispatch(readTodos());
},[dispatch]);

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