reactjs - 使用 @reduxjs/toolkit 中的 configureStore 时如何重置 Redux Store 的状态？

Question

我已经看到了注销后清除/重置存储的解决方案，但不明白如何为以下设置 redux 存储的方式实现相同的功能。

Store.js:

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
import authReducer from './ducks/authentication'
import snackbar from './ducks/snackbar'
import sidebar from './ducks/sidebar'
import global from './ducks/global'
import quickView from './ducks/quickView'
import profileView from './ducks/profileView'

const store = configureStore({
  reducer: {
    auth: authReducer,
    snackbar,
    sidebar,
    global,
    quickView,
    profileView,
  },
  middleware: [...getDefaultMiddleware()],
})

export default store

以下是使用 @reduxjs/toolkit 中的 createAction 和 createReducer 实现所有 reducer 的方式。

小吃吧.js:

import { createAction, createReducer } from '@reduxjs/toolkit'

export const handleSnackbar = createAction('snackbar/handleSnackbar')

export const openSnackBar = (
  verticalPosition,
  horizontalPosition,
  message,
  messageType,
  autoHideDuration = 10000
) => {
  return async dispatch => {
    dispatch(
      handleSnackbar({
        verticalPosition,
        horizontalPosition,
        message,
        autoHideDuration,
        messageType,
        isOpen: true,
      })
    )
  }
}

export const closeSnackbar = () => {
  return dispatch => {
    dispatch(handleSnackbar({ isOpen: false }))
  }
}

const initialState = {
  verticalPosition: 'bottom',
  horizontalPosition: 'center',
  message: '',
  autoHideDuration: 6000,
  isOpen: false,
  messageType: 'success',
}

export default createReducer(initialState, {
  [handleSnackbar]: (state, action) => {
    const {
      isOpen,
      verticalPosition,
      horizontalPosition,
      message,
      autoHideDuration,
      messageType,
    } = action.payload
    state.isOpen = isOpen
    state.verticalPosition = verticalPosition
    state.horizontalPosition = horizontalPosition
    state.message = message
    state.autoHideDuration = autoHideDuration
    state.messageType = messageType
  },
})

Answer 1

根据 Dan Abramov's answer , 创建一个 根 reducer 它将简单地将操作委托(delegate)给您的 主 reducer 或组合 reducer .每当这个根 reducer 收到 重置 Action 类型，它重置状态。

示例:

const combinedReducer = combineReducers({
  first: firstReducer,
  second: secondReducer,
  // ... all your app's reducers
})

const rootReducer = (state, action) => {
  if (action.type === 'RESET') {
    state = undefined
  }
  return combinedReducer(state, action)
}

因此，如果您已将商店配置为 @reduxjs/toolkit's configureStore ，它可能看起来像这样:

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

export default configureStore({
  reducer: {
    counter: counterReducer,
    // ... more reducers
  },
});

在哪里 configureStore的第一个参数 reducer接受 功能 (被视为根 reducer )或 对象 的 slice 使用 combineReducers 在内部转换为根 reducer 的 reducer .

所以，现在我们可以自己创建和传递根 reducer，而不是传递 slice reducer 的对象(如上所示)，我们可以这样做:

const combinedReducer = combineReducers({
  counter: counterReducer,
  // ... more reducers
});

现在，让我们创建一个根 reducer 来执行我们的 重置 需要时工作:

const rootReducer = (state, action) => {
  if (action.type === 'counter/logout') { // check for action type 
    state = undefined;
  }
  return combinedReducer(state, action);
};

export default configureStore({
  reducer: rootReducer,
  middleware: [...getDefaultMiddleware()]
});

这里是 CodeSandbox