亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Redux:道具的全局狀態它不會在選項卡之間更新

Redux:道具的全局狀態它不會在選項卡之間更新

HUWWW 2022-12-22 14:42:57
在項目中,道具的狀態使用 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我很想知道我在哪里可以找到錯誤的任何建議或提示,在此先感謝!
查看完整描述

1 回答

?
catspeake

TA貢獻1111條經驗 獲得超0個贊

不太了解redux-toolkit圖書館。但是,如果不使用持久存儲或使用持久化全局狀態的庫,則不可能實現選項卡之間的同步。這里有幾個選項供您選擇:

  1. 使用session/localstorage來存儲和檢索您的全局狀態。此選項要求您在打開新選項卡時設置初始狀態,以及需要序列化/反序列化(JSON.stringify()JSON.parse())。

  2. redux-堅持。這個庫有很多開箱即用的功能,但同時,它需要更多的配置。它將代表您進行序列化/反序列化。主要痛點之一是它不經常更新,因此可能會引入很多漏洞。

  3. Web 工作者(即redux-state-sync庫)。配置少

  4. IndexDB(即pouchdbreact-pouchdb)使用pouchdb的示例。

是一篇更詳細地解釋這些的博客文章。


查看完整回答
反對 回復 2022-12-22
  • 1 回答
  • 0 關注
  • 89 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號