React Redux项目中axios.post用store.getState()获取payload为空问题排查

问题描述 #

在React Redux项目中执行axios.post请求时，通过store.getState()获取状态值作为请求参数，发送的Payload为空；但直接传入具体字符串值时请求可正常发送。

相关代码 #

userMiddleware #

import axios from 'axios';
import { useDispatch } from 'react-redux';

import {
  SUBMIT_NEW_USER,
  SUBMIT_LOGIN,
  saveAuthData,
} from 'src/actions/form';

const userMiddleware = (store) => (next) => (action) => {
  switch (action.type) {
    case SUBMIT_NEW_USER:

      axios.post(
        'xxxxxx/api/users',
        {
          firstname: store.getState().userNameSubscribe,
          lastname: store.getState().userLastNameSubscribe,
          phoneNumber: store.getState().userPhoneSubscribe,
          email: store.getState().userMailSubscribe,
          personalAddress: store.getState().userAdressSubscribe,
          password: store.getState().userPasswordSubscribe,
        },
      )
        .then(function (response) {
          console.log(response);
        })

        .catch(function (error) {
          console.log(error);
        });

      break;

    case SUBMIT_LOGIN:

      axios.post(
        'xxxxxxx/api/login_check',
        {
          username: store.getState().logInEmail,
          password: store.getState().logInPassword,
        },
      )
        .then(function (response) {
          console.log(response);
          store.dispatch(saveAuthData(response.data.token));

        })
        .catch(function (error) {
          console.log(error);
        });
      break;

  }

  next(action);
};

export default userMiddleware;

userReducer #

import { HANDLE_CHANGE, SAVE_AUTH_DATA } from '../actions/form';

const initialState = {
  userNameSubscribe: '',
  userLastNameSubscribe: '',
  userPhoneSubscribe: '',
  userMailSubscribe: '',
  userAdressSubscribe: '',
  userPasswordSubscribe: '',


  logInEmail: '',
  logInPassword: '',
  token: '',
  loged: false,

};

const userReducer = (state = initialState, action = {}) => {
  switch (action.type) {
    case TOGGLE_FORM:
      return {
        ...state,
        openLogin: !state.openLogin,
      };
    case HANDLE_CHANGE:

      return {
        ...state,
        [action.name]: action.value,
      };
    case SAVE_AUTH_DATA:

      return {
        ...state,
        token: action.token,
        loged: true,
      };

    default:
      return state;
  }
};
export default userReducer;

rootReducer #

import { combineReducers } from 'redux';

import spaceReducer from './spaceReducer';
import userReducer from './userReducer';

const rootReducer = combineReducers({
  space: spaceReducer,
  user: userReducer,
});

export default rootReducer;

store #

import { legacy_createStore as createStore, applyMiddleware } from 'redux';

import { composeWithDevTools } from 'redux-devtools-extension';

import reducer from 'src/reducers';

import userMiddleware from '../middleware/userMiddleware';
import spaceMiddleware from '../middleware/spaceMiddleware';

const middlewares = applyMiddleware(
  userMiddleware,
  spaceMiddleware,

);

const enhancer = composeWithDevTools(middlewares);

const store = createStore(reducer, enhancer);


export default store;

问题原因 #

核心问题是状态层级访问错误：
在rootReducer中，userReducer被挂载到了user这个根状态属性下（combineReducers({ user: userReducer })），但在userMiddleware中直接通过store.getState().userNameSubscribe访问状态，跳过了user层级。此时这些字段在根状态中不存在，取值为undefined，导致axios发送的Payload为空。

另外注意：userReducer中使用的TOGGLE_FORM常量未在顶部import，会引发报错，但这不是Payload为空的直接原因。

解决方案 #

1. 修正状态访问路径：在userMiddleware中，所有获取用户状态的地方，都需要先访问user层级：

// SUBMIT_NEW_USER 中的参数修改为
{
  firstname: store.getState().user.userNameSubscribe,
  lastname: store.getState().user.userLastNameSubscribe,
  phoneNumber: store.getState().user.userPhoneSubscribe,
  email: store.getState().user.userMailSubscribe,
  personalAddress: store.getState().user.userAdressSubscribe,
  password: store.getState().user.userPasswordSubscribe,
}

// SUBMIT_LOGIN 中的参数修改为
{
  username: store.getState().user.logInEmail,
  password: store.getState().user.logInPassword,
}

2. 验证状态更新：在触发提交action前，通过Redux DevTools或在middleware中添加console.log(store.getState().user)，确认对应的状态字段已经通过HANDLE_CHANGE action正确更新为预期值。

3. 修复reducer常量缺失：在userReducer顶部importTOGGLE_FORM常量，避免运行时报错：

import { HANDLE_CHANGE, SAVE_AUTH_DATA, TOGGLE_FORM } from '../actions/form';

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