如何在 redux-toolkit 中使用 persist/re一线？

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在你的例子中，这些是像and之类的字符串accessControl/loginFailed。

您的再水合减速器不会被调用，因为它的操作类型常量扩展为accessControl/persist/REHYDRATE，但 redux-persist 调度类型为 的操作persist/REHYDRATE。

要处理补水，您应该将您的减速器写入对象中extraReducers。这些减速器处理外部操作，并且不会在切片的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')
    });
  }
})