Сброс состояния в исходное состояние на каждой странице

Question

У меня проблема с Redux, когда мой магазин сбрасывается в исходное состояние, когда я изменяю или перезагружаю текущую страницу.

Я не хочу добавлять на свой сайт счетчик, сохраняющий текущий номер, после изменения или перезагрузки страницы. У меня есть кнопки «+» и «-», которые прекрасно работают, но при перезагрузке страницы значение сбрасывается до 0.

components / layout.js:

const initialState = {
  count: 0,
}

function reducer(state = initialState, action) {
  console.log("reducer", state, action)
  switch (action.type) {
 //... some actions...
  }
}

const store = createStore(reducer)

export default ({ children }) => (
  <Provider store={store}>
      ...
  </Provider>

Ожидается: счетчик сохранит значение после перезагрузки страницыФактически: счетчик сбрасывается в 0 после перезагрузки страницы

Answer 1

это ожидаемое поведение. Redux не сохраняет состояние приложения, оно сбрасывается при обновлении приложения. Тем не менее, есть несколько вещей, которые вы можете сделать, чтобы сохранить состояние вашего приложения:

1. Поскольку ваше состояние - это просто число, вы можете сохранить его в localStorage и получить состояние из localStorage при запуске вашего приложения (т.е. при обновлении).
2. Вы можете использовать redux-persist , чтобы сохранить состояние вашего приложения, хотя redux - persist также использует localStorage для внутреннего использования, но это дает вам больший контроль над тем, как вы можете сохранить вашисостояние.

Удачного кодирования!

Answer 2

Перезагружая страницу, вы перезапускаете свое приложение и заново запоминаете его хранилище. Вы можете сохранить значение счетчика в localStorage и использовать его после обновления страницы.