Redux状态突变报错：登出后无法存状态且页面组件无响应

核心问题 #

你的错误根源在于**logout.fulfilled的reducer被定义成了async函数，并且在reducer内部执行了异步的AsyncStorage.clear()操作**。Redux的reducer必须是同步的纯函数，不能包含异步逻辑或返回Promise，否则会导致Redux无法正确跟踪状态变更，触发状态突变的错误，进而引发UI组件无法交互、状态存储异常等问题。

解决步骤 #

1. 将异步副作用移到createAsyncThunk中 #

createAsyncThunk的作用就是处理异步逻辑和副作用，所以把AsyncStorage.clear()移到这里：

export const logout = createAsyncThunk("logout", async (action) => {
  const response = await loginService.logout(action);
  // 在这里执行异步清理操作
  if (response.data.Success && response.data.StatusCode === 200) {
    await AsyncStorage.clear();
    console.log('Storage Clear');
  }
  return response.data;
});

2. 修正logout.fulfilled的reducer，移除async关键字 #

reducer必须是同步函数，直接修改状态即可：

builder.addCase(logout.fulfilled, (state, action) => {
  state.loading = false;
  state.success = action.payload.Success;
  state.message = action.payload.Message;
});

完整修改后的slice代码 #

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import loginService from "../../services/userService";
import AsyncStorage from '@react-native-async-storage/async-storage'; // 确保导入AsyncStorage

export const logout = createAsyncThunk("logout", async (action) => {
  const response = await loginService.logout(action);
  if (response.data.Success && response.data.StatusCode === 200) {
    await AsyncStorage.clear();
    console.log('Storage Clear');
  }
  return response.data;
});

const userSlice = createSlice({
  name: 'userDetails',
  initialState: {
    loading: false,
    error: null,
    message: null,
    success: false,
    details: null,
    secret: null,
    authorizeSecret: null,
    isPwdReseted: false,
    deviceInfomation: {},
  },
  extraReducers: (builder) => {
    builder.addCase(logout.pending, (state, action) => {
      state.loading = true;
      state.success = false;
    });
    builder.addCase(logout.fulfilled, (state, action) => {
      state.loading = false;
      state.success = action.payload.Success;
      state.message = action.payload.Message;
    });
    builder.addCase(logout.rejected, (state, action) => {
      state.loading = false;
      state.success = false;
      state.error = action.payload
    });
  }
});

为什么这样修改？ #

• Redux reducer的本质是纯函数：必须同步执行，不能有副作用（比如异步存储操作），也不能返回Promise。
• createAsyncThunk专门用于封装异步逻辑，在其中执行API请求、存储清理等副作用是符合Redux规范的做法。
• 修正后Redux能正确跟踪状态变更，UI组件就能正常响应状态变化，按钮点击、状态存储等问题都会解决。

内容的提问来源于stack exchange，提问作者Raj Parmar