В проекте состояния реквизита глобально управляются с помощью 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')
)