Презареждане на браузъра:Не се връща към избраната страница, отива към началната страница по подразбиране - ReactJs

Трябва да запазите вашето редуцирано състояние в локално хранилище, когато се актуализира, и да инициализирате вашето хранилище от локално хранилище, когато приложението се зареди.

Пример за минимално запазване на Redux:

Създайте „среден“ компонент, който да обработва постоянните актуализации на състоянието на localStorage.

import React, { useEffect } from 'react';
import { useSelector } from 'react-redux];

const StorePersister = ({ children }) => {
  const state = useSelector(state => state);
  useEffect(() => {
    localStorage.setItem('myState', JSON.stringify(state));
  }, [state]);

  return children;
};

индекс - обгръщане на App компонент с уреда за съхранение.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './components/App';
import StorePersister from './components/StorePersister';
import store from "./store";

ReactDOM.render(
  <Provider store={store}>
    <StorePersister>
      <App />
    </StorePersister>
  </Provider>,
  document.getElementById('root')
);

Инициализиране на състоянието от локално хранилище. Ако няма ключ "myState" или анализът връща null след това празния обект ({} ) ще се използва като резервен вариант.

import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers";

const initialState = JSON.parse(localStorage.getItem('myState')) || {};

const store = createStore(
  rootReducer,
  initialState,
  compose(
    applyMiddleware(thunk),
    (b&&a()) || compose
  )
);

export default store;

Има и redux-persist пакет там, който предлага малко персонализиране за това, което се запазва и инициализира от постоянството.