使用反应注入器时在注销时重置 redux 存储

如何解决使用反应注入器时在注销时重置 redux 存储

我遇到了与以下问题相同的问题。但有一个不同的图书馆。 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();

解决方法

一种解决方案可能是 -

为每个“injected-reducer”定义一个“injected saga”，该“injected-reducer”受到“logout”操作的副作用。
在如此定义的“injected-saga”中，定义特定于注入的 reducer 的清理操作，同时观察“注销”操作。
因此，理论上，当“注销”操作被分派时，所有注入的 saga 像上面定义的一样将运行清理操作，导致在各个减速器中注销等效的切片。

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

:: 更新 ::

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

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