Всем добрый день, пробую разобраться со стейт менеджерами, я понимаю, что стейт менеджер предназначен для хранения глобального состояния (грубо говоря глобальная переменная). К которой можно обратиться из любого компонента.
Но проблема в том, что на одной и той же странице все работает корректно, но когда я изменяю стейт на странице А, то на странице Б стейт не меняется, помогите пожалуйста разобраться где у меня ошибка
redux toolkit
store
import { configureStore } from '@reduxjs/toolkit'
import counterSlice from './counterSlice'
export const store = configureStore({
reducer: {
counter: counterSlice
},
})
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch
slice
import { createSlice, PayloadAction } from '@reduxjs/toolkit'
import type { RootState } from '../Store/store'
interface CounterState {
value: number
}
const initialState: CounterState = {
value: 0,
}
export const counterSlice = createSlice({
name: 'counter',
initialState,
reducers: {
increment: (state) => {
state.value += 1
},
decrement: (state) => {
state.value -= 1
},
incrementByAmount: (state, action: PayloadAction<number>) => {
state.value += action.payload
},
},
})
export const { increment, decrement, incrementByAmount } = counterSlice.actions
export const selectCount = (state: RootState) => state.counter.value
export default counterSlice.reducer
hooks
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import type { RootState, AppDispatch } from '../store'
export const useAppDispatch = () => useDispatch<AppDispatch>()
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
в компоненте
const count = useAppSelector((state) => state.counter.value)
const dispatch = useAppDispatch()
<div>
<div>
<button
aria-label="Increment value"
onClick={() => dispatch(increment())}
>
Increment
</button>
<span>{count}</span>
<button
aria-label="Decrement value"
onClick={() => dispatch(decrement())}
>
Decrement
</button>
</div>
</div>
