如何在 redux-toolkit 中使用 persist/rehydrate？

Question

我已经按照文档中的建议使用 react-toolkit 设置了 redux-persist。现在我需要做一些补液手术，我该怎么做？这是我试过但没有用的方法。

...
import { REHYDRATE } from 'redux-persist'
...

const accessControl = createSlice({
  name: 'accessControl',
  initialState,
  reducers: {
    loginStart(state: AccessControlState) {
      state.isLoading = true
    },
    loginSucces(state: AccessControlState, action: PayloadAction<LoginResponsePayload>) {
      state.isAuthenticated = true
      state.token = action.payload.access_token
      state.isLoading = false
      state.error = null
    },
    loginFailed(state: AccessControlState, action: PayloadAction<string>) {
      state.isAuthenticated = false
      state.token = ''
      state.isLoading = false
      state.error = action.payload
    },
    logout(state: AccessControlState) {
      state.isAuthenticated = false
      state.token = ''
      state.isLoading = false
      state.error = null
    },
    [REHYDRATE]: (state: AccessControlState) => {
      console.log('in rehydrate')
    }
  }
})

Answer 1

createSlice 使用 reducers 对象的键来生成以切片名称为前缀的动作类型常量。在您的情况下，这些是 accessControl/loginStart 和 accessControl/loginFailed.

之类的字符串

你的 rehydrate reducer 没有被调用，因为它的动作类型常量扩展到 accessControl/persist/REHYDRATE，但是 redux-persist 调度了一个类型为 persist/REHYDRATE.

的动作

要处理再水合，您应该改为在 extraReducers 对象中编写减速器。这些 reducer 处理外部操作，不在切片的 actions 属性.

中生成操作

示例：

import { createSlice } from '@reduxjs/toolkit'
import { REHYDRATE } from 'redux-persist'

const accessControl = createSlice({
  name: 'accessControl',
  initialState,
  reducers: {
    ...
  },
  extraReducers: (builder) => {
    builder.addCase(REHYDRATE, (state) => {
      console.log('in rehydrate')
    });
  }
})

如何在 redux-toolkit 中使用 persist/rehydrate？

How do I use persist/rehydrate in redux-toolkit?

typescript

redux

redux-toolkit

redux-persist