Redux: глобальное состояние реквизита не обновляется между вкладками - PullRequest
Новая
       204

Redux: глобальное состояние реквизита не обновляется между вкладками

0 голосов
/ 07 августа 2020

В проекте состояния реквизита глобально управляются с помощью redux (redux-toolkit). Поэтому, если я выполняю действие, которое изменяет их, это должно изменить глобальное состояние и выполняться на остальных вкладках, если я не ошибаюсь. Оказывается, что только когда я обновляю sh каждую вкладку, он просто принимает изменения в свойствах, но не «автоматически», что может быть вызвано этим ??

Я лучше всего описываю, как это происходит:

Например, у меня открыты 2 вкладки, в одной я добавляю товары в корзину, а в другой - в корзину. Если у меня есть 2 элемента в корзине, и я удаляю их прямо здесь, то я добавляю еще один из вкладки элементов, бывает, что в нем не зарегистрировано, что элементы были удалены, и мне кажется, что я добавил третий пункт. Если я go схожу в машину и обновляю sh, я получаю 3 элемента «были добавлены снова», которые я удалил. Если я сейчас удалю эти 3 из корзины, я go вернусь к предыдущему и обновлю sh, потребуется, чтобы они были удалены, и я смогу добавлять статьи из 0.

Также я подумал что редуктор может ошибаться, поскольку если я выполню действие «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')
)

1 Ответ

2 голосов
/ 07 августа 2020

Не очень уверен в redux-toolkit библиотеке. Но выполнить sh синхронизацию между вкладками невозможно без использования постоянного хранилища или библиотеки, которая использует постоянное глобальное состояние. Вот несколько вариантов:

  1. Использование session / localstorage для сохранения и получения вашего глобального состояния. Этот параметр требует, чтобы вы настраивали исходное состояние всякий раз, когда открывается новая вкладка, а также требуется сериализация / десериализация (JSON.stringify() и JSON.parse()).

  2. сокращение-персист . Эта библиотека поставляется с множеством функций «из коробки», но в то же время требует немного больше настроек. Он будет выполнять сериализацию / десериализацию от вашего имени. Одна из основных проблем заключается в том, что он не обновляется часто, поэтому может привести к множеству уязвимостей.

  3. Веб-воркеры (т.е. redux-state-syn c библиотека). Меньше конфигурации

  4. IndexDB (т.е. pouchdb и react-pouchdb ) Пример использования pouchdb .

Здесь - это сообщение в блоге, которое объясняет это более подробно.

...