React Redux登录应用Reducer未触发，请求帮忙排查问题

• 检查Reducer与Store的关联配置
  确认创建Store时是否正确传入Reducer：

  • 若使用原生Redux，需确保createStore的第一个参数是目标Reducer，或通过combineReducers合并后传入：

    import { createStore, combineReducers } from 'redux';
    import loginReducer from './loginReducer';
    
    const rootReducer = combineReducers({
      login: loginReducer
    });
    const store = createStore(rootReducer);
    

  • 若使用Redux Toolkit，检查configureStore的reducer配置是否包含登录相关Reducer：

    import { configureStore } from '@reduxjs/toolkit';
    import loginReducer from './loginReducer';
    
    const store = configureStore({
      reducer: {
        login: loginReducer
      }
    });
    

• 排查Action分发与匹配逻辑

  • 触发登录动作时必须调用dispatch方法，不能直接调用Action创建函数：

    // 错误写法
    loginAction(credentials);
    // 正确写法
    dispatch(loginAction(credentials));
    

  • 核对Action的type字段与Reducer中的case是否完全一致，注意大小写、字符串拼写问题。

• 根据控制台报错定位问题

  • 若报错为Cannot read property 'xxx' of undefined，检查Reducer的初始State是否包含必要字段（如isLoading、user、error），确保State结构完整：

    const initialState = {
      isLoading: false,
      user: null,
      error: null
    };
    

  • 若报错为Store does not have a valid reducer，直接检查Store创建时的Reducer传入逻辑，排除未传入或传入错误的情况。

• 修复StackBlitz项目运行问题

  • 检查项目依赖版本兼容性，确保react、react-dom、redux、react-redux版本匹配，可重新安装依赖：

    npm install
    

  • 查看StackBlitz控制台的模块导入报错，确认组件、Reducer、Action文件的导入路径是否正确，避免拼写错误或扩展名缺失。

• 验证组件与Redux的连接

  • 若使用React-Redux Hooks，确保组件中正确调用useDispatch和useSelector：

    import { useDispatch, useSelector } from 'react-redux';
    import { loginAction } from './actions';
    
    const LoginComponent = () => {
      const dispatch = useDispatch();
      const { isLoading, error } = useSelector(state => state.login);
    
      const handleLogin = (credentials) => {
        dispatch(loginAction(credentials));
      };
    
      // ...组件逻辑
    };
    

  • 若使用connect高阶组件，检查mapStateToProps和mapDispatchToProps的映射是否正确，确保State节点和Action被正确注入组件。

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