运行切片（redux 状态）更新完成后的副作用

Question

我正在使用 Redux Toolkit，我想将切片的最新状态存储在 sessionStorage 中。我知道我可以使用 store.subscribe() 来处理整个状态更新，但我所追求的是捕捉特定的切片更新。

我可以通过使用选择器切入自定义挂钩来实现它。请看下面的代码。

在 createSlice 中是否有 property/functionality 挂钩状态更新运行状态更新完成后的副作用，类似于 prepare 属性。


//slice
export const aliasSlice = createSlice({
    name: 'alias',
    initialState: initState ,
    reducers: {
        setAlias: (state, action) => action.payload
    },
})

export const { setAlias } = aliasSlice.actions

export const selectAlias = state => state.alias

//custom hook
const useSessionStrorage = () => {
    const alias = useSelector(selectAlias)

    useEffect(()=>{
        if(alias)
            window.sessionStorage.setItem('mySessionStorageKey', alias)
    },[alias])
}

Answer 1

没有，RTK里没有这个东西

一般来说，我建议您不要在组件级别处理它，而是在 subscribe 自定义中间件中，或者 - 可能是最简单的方法 - 使用 redux-persist这个目的并且非常可配置。

在中间件中，它看起来像这样：

const myMw = api => next => action => {
  const lastValue = mySelector(api.getState)
  const result = next(action)
  const newValue = mySelector(api.getState)
  if (lastValue !== newValue) {
    // do something
  }
  return result
}

与 subscribe:

let lastValue = mySelector(store.getState)
store.subscribe(() => {
  const newvalue = mySelector(store.getState)
  if (lastValue !== newValue) {
    // do something
  }
  lastValue = newValue
})

运行切片（redux 状态）更新完成后的副作用

Run a side effect after slice (redux state) update completed

react-redux

redux-toolkit

运行 切片（redux 状态）更新完成后的副作用

Run a side effect after slice (redux state) update completed

react-redux

redux-toolkit

运行切片（redux 状态）更新完成后的副作用