如何在React.js中用Redux Toolkit重置Redux Store所有切片的初始状态

下面提供两种可行的实现方式，帮你一次性将authSlice和uiSlice重置到各自的初始状态：

方法一：每个切片定义重置动作，全局批量触发 #

1. 给每个切片添加重置自身状态的reducer逻辑：

   • 在authSlice中：

   const initialState: InitialState = {
     permissions: [],
     loggedIn: false,
   }
   
   const authSlice = createSlice({
     name: 'auth',
     initialState,
     reducers: {
       // 保留原有reducer逻辑
       logout: () => initialState,
       // 添加单独的重置动作（也可直接复用logout）
       resetAuth: () => initialState,
     },
   })
   
   export const { resetAuth } = authSlice.actions
   

   • 在uiSlice中同理：

   // 假设ui切片的初始状态
   const initialUiState = {
     isLoading: false,
     error: null,
   }
   
   const uiSlice = createSlice({
     name: 'ui',
     initialState: initialUiState,
     reducers: {
       // 保留原有reducer逻辑
       resetUi: () => initialUiState,
     },
   })
   
   export const { resetUi } = uiSlice.actions
   

2. 在需要全局重置的场景（比如全局登出逻辑），同时分发这两个重置动作：

   import { useDispatch } from 'react-redux'
   import { resetAuth } from './auth/authSlice'
   import { resetUi } from './ui/uiSlice'
   
   const handleGlobalReset = () => {
     const dispatch = useDispatch()
     dispatch(resetAuth())
     dispatch(resetUi())
   }
   

方法二：定义全局重置动作，各切片监听触发 #

1. 创建一个全局通用的重置动作：

   // 可单独创建文件，比如actions/globalActions.ts
   import { createAction } from '@reduxjs/toolkit'
   
   export const resetAllSlices = createAction('global/resetAll')
   

2. 在每个切片的extraReducers中监听这个全局动作，返回自身初始状态：

   • authSlice中：

   const authSlice = createSlice({
     name: 'auth',
     initialState,
     reducers: {
       // 保留原有reducer逻辑
       logout: () => initialState,
     },
     extraReducers: (builder) => {
       builder.addCase(resetAllSlices, () => initialState)
     },
   })
   

   • uiSlice中：

   const uiSlice = createSlice({
     name: 'ui',
     initialState: initialUiState,
     reducers: {
       // 保留原有reducer逻辑
     },
     extraReducers: (builder) => {
       builder.addCase(resetAllSlices, () => initialUiState)
     },
   })
   

3. 后续只需分发这个全局动作，就能一键重置所有切片：

   import { useDispatch } from 'react-redux'
   import { resetAllSlices } from './actions/globalActions'
   
   const handleGlobalReset = () => {
     const dispatch = useDispatch()
     dispatch(resetAllSlices())
   }
   

两种方法各有优势：方法一逻辑直观，每个切片的重置逻辑独立可控；方法二更简洁统一，后续新增切片时，只需在对应切片的extraReducers中添加监听即可。

内容的提问来源于stack exchange，提问作者Piyush Aggarwal