Redux DevTool中State未更新，请求排查登录流程代码问题

嘿，我一眼就发现了问题的核心——你的userLoginReducer.js里有个不起眼的拼写错误，直接导致Redux Store完全没响应派发的actions！

1. 错误根源 #

在你的reducer代码里，switch语句判断的是action.types（多了个字母s），但Redux的action对象里存储类型的字段是**action.type**（单数形式）。正因为这个错误，所有派发的action都进入了default分支，直接返回初始state，这就是为什么DevTools能看到action，但state始终不变。

看你原来的错误代码片段：

const userReducer = (state = userInitialState, action = {}) => {
  switch (action.types) { // ❌ 这里应该是action.type
    // ...
  }
};

2. 修正后的Reducer代码 #

只需要把action.types改成action.type，问题就能解决：

import * as types from '../actions/actionTypes';
import userInitialState from './userInitialState';

const userReducer = (state = userInitialState, action = {}) => {
  switch (action.type) { // ✅ 修正为正确的action.type
    case types.SIGNING_IN_USER:
      return { ...state, user: {}, error: null, loading: true };
    case types.SIGNIN_USER_FAILURE:
      return { ...state, user: {}, error: { message: 'Error loading data from the API' }, loading: false };
    case types.SIGNIN_USER_SUCCESS:
      return { ...state, user: action.payload, error: null, loading: false };
    default:
      return state;
  }
};

export default userReducer;

3. 额外的确认项（确保流程完整） #

为了避免其他潜在问题，你可以再检查这几点：

• 确认actionTypes.js里的常量（SIGNING_IN_USER、SIGNIN_USER_SUCCESS、SIGNIN_USER_FAILURE）拼写完全正确，和reducer里的case匹配。
• 确认你的根组件已经用Provider包裹，并且传入了正确的store实例，比如：

import { Provider } from 'react-redux';
import configureStore from './store/configureStore';

const store = configureStore();

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

• 你的SignInModalContainer里的mapStateToProps和mapDispatchToProps写法是正确的，没问题。

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