Javascript Redux：道具的全球状态，它不是'；t在选项卡之间更新

在该项目中，道具的状态通过redux（redux工具包）进行全局管理。因此，如果我执行一个修改它们的操作，这应该会修改全局状态，如果我没有弄错的话，应该在其余选项卡中执行。 事实证明，只有当我刷新每个标签时，它才会对道具进行更改，而不是“自动”，这是什么原因造成的

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

例如，我打开了两个选项卡，一个是将项目添加到购物车，另一个是购物车。如果我在购物车中有两个项目，并且我从这里删除了它们，然后我从“项目”选项卡中添加了另一个项目，碰巧在这里没有注册项目被删除，我觉得好像我添加了第三个项目。如果我去车上刷新，我会得到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')
)

从“React”导入React
从“react dom”导入react dom
从'@reduxjs/toolkit'导入{configureStore，getDefaultMiddleware}
从“react redux”导入{Provider}
从“./App”导入应用程序
从“./slices”导入persistedReducer
进口{
商店，
脸红
再水化，
暂停，
坚持
净化
登记
}来自“redux persist”
从“redux persist/integration/react”导入{PersistGate}
常量存储=配置存储({
减速器：持久减速器，
中间件：getDefaultMiddleware({
序列化检查：{
ignoredActions:[冲洗、再水化、暂停、保留、清除、注册]，
},
}),
})
常量persistor=persistStore（存储）
ReactDOM.render(
,
document.getElementById（'root'））
)

对

redux工具包

库不太清楚。但是，如果不使用持久存储或使用全局状态的库，就不可能实现选项卡之间的同步。以下是供您选择的几个选项：

使用

会话

/

本地存储

存储和检索全局状态。此选项要求您在打开新选项卡时设置初始状态，同时需要序列化/反序列化（

JSON.stringify（）

和

JSON.parse（）

）

。这个库有很多现成的特性，但同时，它需要更多的配置。它将代表您进行序列化/反序列化。一个主要的痛点是它没有经常更新，所以可能会引入很多漏洞

（即图书馆）。少配置

（即和）使用的示例

---

是一篇更详细地解释这些内容的博客文章。

对

redux工具包

库不太清楚。但是，如果不使用持久存储或使用全局状态的库，就不可能实现选项卡之间的同步。以下是供您选择的几个选项：

使用

会话

/

本地存储

存储和检索全局状态。此选项要求您在打开新选项卡时设置初始状态，同时需要序列化/反序列化（

JSON.stringify（）

和

JSON.parse（）

）

。这个库有很多现成的特性，但同时，它需要更多的配置。它将代表您进行序列化/反序列化。一个主要的痛点是它没有经常更新，所以可能会引入很多漏洞

（即图书馆）。少配置

（即和）使用的示例

---

是一篇更详细地解释这些问题的博客文章。

我正在使用redux persist，我忘了这么说。但我没有听说过redux状态同步，听起来它可以解决我的问题。我会看一看，然后告诉你是否有效。。。非常感谢你！解决方案2适合我。。。碰巧我已经设置了redux persist，但必须以正确的方式配置它才能实现这一点。。。如本指南所述。我很高兴：）我正在使用redux坚持，我忘了这么说。但我没有听说过redux状态同步，听起来它可以解决我的问题。我会看一看，然后告诉你是否有效。。。非常感谢你！解决方案2适合我。。。碰巧我已经设置了redux persist，但必须以正确的方式配置它才能实现这一点。。。如本指南所述。我很高兴：）