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.actions

export const cartSelector = (state) => state.cart

export default cartSlice.reducer

我很想知道我在哪里可以找到错误的任何建议或提示，在此先感谢！

Answer 1

不太了解redux-toolkit图书馆。但是，如果不使用持久存储或使用持久化全局状态的库，则不可能实现选项卡之间的同步。这里有几个选项供您选择：使用session/localstorage来存储和检索您的全局状态。此选项要求您在打开新选项卡时设置初始状态，以及需要序列化/反序列化（JSON.stringify()和JSON.parse()）。redux-坚持。这个库有很多开箱即用的功能，但同时，它需要更多的配置。它将代表您进行序列化/反序列化。主要痛点之一是它不经常更新，因此可能会引入很多漏洞。Web 工作者（即redux-state-sync库）。配置少IndexDB（即pouchdb和react-pouchdb）使用pouchdb的示例。这是一篇更详细地解释这些的博客文章。