使用 react-injectors 时在注销时重置 redux 存储

Question

我遇到了与以下问题相同的问题。但有一个不同的图书馆。 How to reset the state of a Redux store?

我正在使用来自 react-boilerplate 的 redux-injectors，并且正在使用库提供的增强器。 我需要在注销时清除所有 redux 状态，但由于我的注销位于单独的全局切片上，它只能影响全局切片而不影响其他 redux 状态。如何清除所有其他从全局状态调用动作的状态？

这是我如何组合减速器：

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

export function createReducer(injectedReducers = {}) {
  if (Object.keys(injectedReducers).length === 0) {
    return state => state;
  }
  return combineReducers({
    ...injectedReducers
  });
}

我的 globalReducer：

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

const initialState = {
  loading: false
};

const globalSlice = createSlice({
  name: 'global',
  initialState,
  reducers: {
    logout(state) {
      return state;
    }
  }
});

export const { actions, reducer, name: sliceKey } = globalSlice;

我的商店/index.js

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import { createInjectorsEnhancer, forceReducerReload } from 'redux-injectors';
import createSagaMiddleware from 'redux-saga';
import { createReducer } from './reducers';

function configureAppStore() {
  const reduxSagaMonitorOptions = {
    onError: (error, { sagaStack }) => {
      // console.log(error, sagaStack);
    }
  };
  const sagaMiddleware = createSagaMiddleware(reduxSagaMonitorOptions);
  const { run: runSaga } = sagaMiddleware;

  // Create the store with saga middleware
  const middlewares = [sagaMiddleware];

  const enhancers = [
    createInjectorsEnhancer({
      createReducer,
      runSaga
    })
  ];

  const store = configureStore({
    reducer: createReducer(),
    middleware: [
      ...getDefaultMiddleware({
        serializableCheck: {
          ignoredActionPaths: ['payload.history']
        },
        immutableCheck: false
      }),
      ...middlewares
    ],
    devTools:
      process.env.NODE_ENV !== 'production'
      || process.env.PUBLIC_URL.length > 0,
    enhancers
  });

  // Make reducers hot reloadable, see http://mxs.is/googmo
  if (module.hot) {
    module.hot.accept('./reducers', () => {
      forceReducerReload(store);
    });
  }

  return store;
}

export const store = configureAppStore();

Answer 1

一种解决方案可能是 -

1. 为每个受“注销”操作影响的“injected-reducer”定义一个“injected saga”。
2. 在如此定义的“injected-saga”中，定义特定于该注入 reducer 的清理操作，同时观察“注销”操作。
3. 因此，理论上，当调度“注销”操作时，所有如上定义的注入 saga 都将运行清理操作，从而在各个减速器中产生注销等效切片。

试试这个，这应该解决这个问题。

:: 更新 ::

避免为所有其他相关组件/切片创建 saga 的一点区别。

工作原型 - https://stackblitz.com/edit/inject-reducer?devtoolsheight=33&file=src/App.js