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

Question

在项目中，道具的状态使用 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.actionsexport const cartSelector = (state) => state.cartexport default cartSlice.reducer我很想知道我在哪里可以找到错误的任何建议或提示，在此先感谢！

Answer 1

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

1. 使用session/localstorage来存储和检索您的全局状态。此选项要求您在打开新选项卡时设置初始状态，以及需要序列化/反序列化（JSON.stringify()和JSON.parse()）。

2. redux-坚持。这个库有很多开箱即用的功能，但同时，它需要更多的配置。它将代表您进行序列化/反序列化。主要痛点之一是它不经常更新，因此可能会引入很多漏洞。

3. Web 工作者（即redux-state-sync库）。配置少

4. IndexDB（即pouchdb和react-pouchdb）使用pouchdb的示例。

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