Redux Toolkit页面跳转旧数据残留问题及相关功能咨询

一、确保重置操作在路由跳转前完成 #

由于你使用的是异步action（dispatch返回Promise），仅在useEffect清理函数中执行无法保证跳转前完成，需结合路由拦截实现：

1. 确认异步action返回Promise #

先保证resetCollectionData是返回Promise的action，比如用createAsyncThunk定义：

import { createAsyncThunk } from '@reduxjs/toolkit';

export const resetCollectionData = createAsyncThunk(
  'collection/reset',
  async () => {
    // 写入你的异步清理逻辑（如调用API清空缓存等）
    await yourAsyncCleanupLogic();
  }
);

2. 使用React Router的路由拦截（v6+） #

利用useBlocker钩子拦截路由跳转，等待重置操作完成后再允许跳转：

import { useBlocker } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { resetCollectionData } from './path-to-your-slice';

function YourSharedComponent() {
  const dispatch = useDispatch();
  
  // 拦截路由跳转
  useBlocker(async (navigation) => {
    // 执行重置并等待完成
    await dispatch(resetCollectionData());
    // 允许继续跳转
    navigation.proceed();
  });

  // ...组件其他逻辑
}

若使用React Router v5及以下版本，可通过history.block实现类似逻辑：

import { useHistory } from 'react-router-dom';
import { useDispatch } from 'react-redux';

function YourSharedComponent() {
  const history = useHistory();
  const dispatch = useDispatch();

  useEffect(() => {
    const unblock = history.block(async () => {
      await dispatch(resetCollectionData());
      // 解除拦截并允许跳转
      unblock();
      return true;
    });

    return unblock;
  }, [history, dispatch]);

  // ...组件其他逻辑
}

二、追踪dispatch动作的状态 #

Redux Toolkit无内置全局状态标识，但可通过createAsyncThunk自动生成的生命周期action，在slice中添加状态字段追踪：

1. 在slice中添加状态字段 #

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { resetCollectionData } from './path-to-your-thunk';

const collectionSlice = createSlice({
  name: 'collection',
  initialState: {
    data: [],
    // 新增状态字段
    isResetting: false,
    resetError: null,
  },
  extraReducers: (builder) => {
    builder
      // 重置开始
      .addCase(resetCollectionData.pending, (state) => {
        state.isResetting = true;
        state.resetError = null;
      })
      // 重置成功
      .addCase(resetCollectionData.fulfilled, (state) => {
        state.isResetting = false;
        state.data = []; // 在此执行数据重置
      })
      // 重置失败
      .addCase(resetCollectionData.rejected, (state, action) => {
        state.isResetting = false;
        state.resetError = action.error.message;
      });
  },
});

export default collectionSlice.reducer;

2. 在组件中获取状态 #

import { useSelector } from 'react-redux';

function YourComponent() {
  const { isResetting, resetError } = useSelector((state) => state.collection);

  // 根据状态处理UI，如显示加载提示或错误信息
  if (isResetting) {
    return <div>正在清理数据...</div>;
  }

  if (resetError) {
    return <div>数据清理失败：{resetError}</div>;
  }

  // ...组件其他逻辑
}

如果你的重置操作是同步的（无需异步逻辑），直接使用同步action即可，此时dispatch为同步执行，不会出现数据残留问题，也无需额外追踪状态。

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