使用 @reduxjs/toolkit 中的 configureStore 时如何重置 Redux Store 的状态? [英] How to reset state of Redux Store when using configureStore from @reduxjs/toolkit?

问题描述

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

Store.js:

<预><代码>从@reduxjs/toolkit"导入 { configureStore, getDefaultMiddleware }从 './ducks/authentication' 导入 authReducer从 './ducks/snackbar' 导入小吃店从 './ducks/sidebar' 导入侧边栏从 './ducks/global' 导入全局从'./ducks/quickView'导入quickView从 './ducks/profileView' 导入 profileViewconst store = configureStore({减速器:{身份验证:authReducer，小吃店，侧边栏，全球的，快速浏览，个人资料查看，},中间件:[...getDefaultMiddleware()],})导出默认存储

以下是所有使用来自@reduxjs/toolkit 的 createAction 和 createReducer 实现的 reducer.

snackbar.js:

<预><代码>从@reduxjs/toolkit"导入 { createAction, createReducer }export const handleSnackbar = createAction('snackbar/handleSnackbar')导出 const openSnackBar = (垂直位置，水平位置，信息，消息类型，自动隐藏持续时间 = 10000) =>{返回异步调度 =>{派遣(手柄小吃吧({垂直位置，水平位置，信息，自动隐藏持续时间，消息类型，isOpen: 真,}))}}export const closeSnackbar = () =>{返回调度 =>{dispatch(handleSnackbar({ isOpen: false }))}}常量初始状态 = {垂直位置:'底部'，水平位置:'中心'，信息: ''，自动隐藏持续时间:6000，isOpen: 假，消息类型:'成功'，}导出默认 createReducer(initialState, {[handleSnackbar]:(状态，动作)=>{常量{开了，垂直位置，水平位置，信息，自动隐藏持续时间，消息类型，} = action.payloadstate.isOpen = isOpenstate.verticalPosition = 垂直位置state.horizo​​ntalPosition = 水平位置状态.消息 = 消息state.autoHideDuration = autoHideDurationstate.messageType = messageType},})

解决方案

一个带有两个 reducer 的简化示例:

//state.first 的动作和reducerconst resetFirst = () =>({ type: 'FIRST/RESET' });const firstReducer = (state = initialState, action) =>{开关(动作.类型){//这里的其他动作类型案例第一次/重置":返回初始状态；默认:返回状态；}};//state.second的动作和reducerconst resetSecond = () =>({ 类型: '秒/重置' });const secondReducer = (state = initialState, action) =>{开关(动作.类型){//这里的其他动作类型案例第二/重置":返回初始状态；默认:返回状态；}};const rootReducer = combineReducers({第一个:firstReducer，第二个:secondReducer});//thunk 操作以进行全局注销const 注销 = () =>(调度) =>{//在这里做其他注销的事情，例如用后端注销用户等.调度(重置第一())；调度(重置秒())；//让你的每一个减速器在这里重置.};

I have seen solutions for clearing/resetting the store after logout but did not understand how to implement the same functionality for the following way of setting up the redux store.

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

Here is how all the reducers implemented using createAction and createReducer from @reduxjs/toolkit.

snackbar.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
  },
})

解决方案

A simplified example with two reducers:

// actions and reducer for state.first
const resetFirst = () => ({ type: 'FIRST/RESET' });

const firstReducer = (state = initialState, action) => {
    switch (action.type) {
        // other action types here

        case 'FIRST/RESET':
            return initialState;

        default:
            return state;
    }
};


// actions and reducer for state.second
const resetSecond = () => ({ type: 'SECOND/RESET' });

const secondReducer = (state = initialState, action) => {
    switch (action.type) {
        // other action types here

        case 'SECOND/RESET':
            return initialState;

        default:
            return state;
    }
};


const rootReducer = combineReducers({
    first: firstReducer,
    second: secondReducer
});

// thunk action to do global logout
const logout = () => (dispatch) => {
    // do other logout stuff here, for example logging out user with backend, etc..

    dispatch(resetFirst());
    dispatch(resetSecond());
    // Let every one of your reducers reset here.
};

这篇关于使用 @reduxjs/toolkit 中的 configureStore 时如何重置 Redux Store 的状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！