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

Question

我遇到了与以下问题相同的问题。但有不同的图书馆。

我正在使用 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;

我的store/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

一个解决方案可能是-

为每个受“注销”操作产生副作用的“注入减速器”定义一个“注入传奇”。
在如此定义的“注入传奇”中，定义特定于注入减速器的清理操作，同时观察“注销”操作。
因此，理论上，当“注销”操作被调度时，所有如上定义的注入传奇将运行清理操作导致各个减速器中的注销等效切片。

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

:: 已更新 ::

避免为所有其他相关 component/slices.

创建 saga 的小区别

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

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

reset redux store on logout when using react-injectors

redux

react-redux

state-management

react-boilerplate