React Redux无法自动渲染状态变更，页面刷新后才生效

我在使用React Redux时遇到状态更新不实时的问题——修改后的数据必须刷新页面才能正确显示，无法立即展示当前状态。

相关代码片段 #

Article.js核心代码 #

const buySomething = async (articelId) => {
 await axios.put(`/articel/request/${articelId}`).then((res) => {
  dispatch(requested(currentUser._id));
  setSnackbarMessage(res.data);
  setOpen(true);
});
};

Article模型定义 #

requested: {
  type: [String],
  default: [],
},

articelSlice.js核心逻辑 #

const initialState = {
  currentArticel: null,
  loading: false,
  error: false,
};

requested: (state, action) => {
  if (!state.currentArticel.requested.includes(action.payload)) {
    state.currentArticel.requested.push(action.payload);
  } else {
    state.currentArticel.requested.splice(
      state.currentArticel.requested.findIndex(
        (userId) => userId === action.payload
      ),
      1
    );
  }
},

完整articelSlice代码 #

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
currentArticel: null,
loading: false,
error: false,
};

export const articelSlice = createSlice({
name: "articel",
initialState,
reducers: {
fetchStart: (state) => {
  state.loading = true;
},
 fetchSuccess: (state, action) => {
  state.loading = false;
  state.currentArticel = action.payload;
 },
 fetchFailure: (state) => {
  state.loading = false;
  state.error = true;
},
   requested: (state, action) => {
  if (!state.currentArticel.requested.includes(action.payload)) {
    state.currentArticel.requested.push(action.payload);
  } else {
    state.currentArticel.requested.splice(
      state.currentArticel.requested.findIndex(
        (userId) => userId === action.payload
      ),
      1
    );
  }
},
like: (state, action) => {
  if (!state.currentArticel.likes.includes(action.payload)) {
    state.currentArticel.likes.push(action.payload);
    state.currentArticel.dislikes.splice(
      state.currentArticel.dislikes.findIndex(
        (userId) => userId === action.payload
      ),
      1
    );
  }
},
 dislike: (state, action) => {
  if (!state.currentArticel.dislikes.includes(action.payload)) {
    state.currentArticel.dislikes.push(action.payload);
    state.currentArticel.likes.splice(
      state.currentArticel.likes.findIndex(
        (userId) => userId === action.payload
      ),
      1
    );
  }
  },
 },
});

export const {
fetchStart,
fetchSuccess,
fetchFailure,
like,
dislike, 
requested,
} = articelSlice.actions;

export default articelSlice.reducer;

问题原因与解决思路 #

核心问题 #

Redux Toolkit虽然支持"看似直接修改"状态，但push/splice这类数组原地修改方法，本质上没有改变数组的引用地址，React无法检测到状态变化，导致组件不触发重渲染。

修复方案 #

修改requested reducer，使用不可变更新方式处理数组，确保生成新的数组引用：

requested: (state, action) => {
  const userId = action.payload;
  const isRequested = state.currentArticel.requested.includes(userId);
  
  state.currentArticel.requested = isRequested
    ? state.currentArticel.requested.filter(id => id !== userId)
    : [...state.currentArticel.requested, userId];
},

额外检查点 #

1. 确保组件通过useSelector正确订阅currentArticel状态，且依赖项配置无误
2. 验证后端接口返回的更新数据是否正确，可在请求回调中打印res.data确认
3. 统一异步代码写法，避免async/await与.then混用：

const buySomething = async (articelId) => {
  try {
    const res = await axios.put(`/articel/request/${articelId}`);
    dispatch(requested(currentUser._id));
    setSnackbarMessage(res.data);
    setOpen(true);
  } catch (err) {
    // 补充错误处理逻辑
  }
};

内容的提问来源于stack exchange，提问作者Captai-N