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

我想在这里找到错误的任何建议或提示，谢谢！

编辑：
我正在使用redux-persist将更改保留在根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存储和检索您的全局状态。此选项要求您在每次打开新标签时都要设置初始状态，并需要序列化/反序列化（JSON.stringify()和JSON.parse()）。
redux-persist。该库具有许多现成的功能，但与此同时，它需要更多的配置。它将代表您进行序列化/反序列化。主要的痛点之一是它不经常更新，因此可能会引入很多漏洞。
Web workers（即redux-state-sync库）。配置更少
IndexDB（即pouchdb和react-pouchdb）使用pouchdb的示例。

Here是一篇博客文章，详细介绍了这些内容。

Redux：道具的全局状态不会在标签之间更新

1 个答案: