Redux：道具的全局状态它不会在选项卡之间更新

Question

在项目中，props的状态是通过redux（redux-toolkit）进行全局管理的。因此，如果我执行一个修改它们的操作，这应该会修改全局状态，并且如果我没有弄错的话，就会在其余选项卡中采用。事实证明，只有当我刷新每个选项卡时，它只接受道具的变化而不是“自动”，这是什么原因造成的？？

我最好描述它是如何发生的：

例如，我打开了 2 个选项卡，一个用于将商品添加到购物车，另一个用于添加购物车。如果我的购物车中有 2 件商品，我从此处删除了它们，然后我从商品选项卡中添加了另一件商品，碰巧在其中没有注册商品已被删除，在我看来好像我已经添加了第三项。如果我去车上刷新，我会得到 3 个我删除的“已再次添加”的项目。如果我现在从购物车中删除这 3 件，我回到上一件并刷新，它们就被删除了，能够从 0 添加文章。

我还认为 reducer 可能是错误的，因为如果我执行“addItem”操作，它应该直接修改 prop 的当前状态，但我在这里看不到错误。无论如何都会发生我之前描述的事情。

这是我的减速器切片：

// cart slice:
import { createSlice } from '@reduxjs/toolkit'
 
export const initialState = {
  items: [],
  countItems: 0,
 }
 
const cartSlice = createSlice({
  name: 'cart',
  initialState,
  reducers: {
    addItem: (state, action) => {
      const product = action.payload
      const itemExists = state.items.find((item) => product.id === item.id)
      if (itemExists) {
        itemExists.quantity += 1
      } else {
        const newProduct = { ...product, ...{ quantity: 1 } }
        state.items.push(newProduct)
      }
      state.countItems += 1
     
    },
    removeItem: (state, action) => {
      const product = action.payload
      state.items = state.items.filter((item) => product.id !== item.id)
 
      state.countItems -= product.quantity
    },
  },
})
 
export const {
  addItem,
  removeItem,
} = cartSlice.actions
export const cartSelector = (state) => state.cart
export default cartSlice.reducer

我希望得到任何关于我在哪里可以找到错误的建议或提示，在此先感谢！

编辑：
我正在使用 redux-persist 来持久化在 root index.js 中配置的商店中的更改，如下所示：

import React from 'react'
import ReactDOM from 'react-dom'
import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
import { Provider } from 'react-redux'
import App from './App'
import persistedReducer from './slices'
import {
  persistStore,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from 'redux-persist'
import { PersistGate } from 'redux-persist/integration/react'

const store = configureStore({
  reducer: persistedReducer,
  middleware: getDefaultMiddleware({
    serializableCheck: {
      ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
    },
  }),
})
const persistor = persistStore(store)

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root')
)

Answer 1

不太了解 redux-toolkit 库。但是，如果不使用持久存储或使用持久化全局状态的库，则不可能实现选项卡之间的同步。这里有几个选项供您选择：

使用 session/localstorage 来存储和检索您的全局状态。此选项要求您在打开新选项卡时设置初始状态，并且需要 serialization/deserialization（JSON.stringify() 和 JSON.parse()）。
redux-persist。这个库有很多开箱即用的功能，但同时，它需要更多的配置。它将代表您 serialization/deserialization。主要痛点之一是它不经常更新，因此可能会引入很多漏洞。
Web workers (i.e. redux-state-sync 库）。配置少
IndexDB (i.e. pouchdb and react-pouchdb) Example using pouchdb.

Here 是一个博客 post，它更详细地解释了这些内容。

Redux：道具的全局状态它不会在选项卡之间更新

Redux: global state of props it isn't updated in between tabs

javascript

reactjs

redux

react-redux

redux-toolkit