ब्राउज़र रीलोड:चयनित पृष्ठ पर वापस नहीं जाता है, डिफ़ॉल्ट होमपेज पर जाता है - ReactJs

अपडेट होने पर आपको अपनी रेडक्स स्थिति को स्थानीय स्टोरेज पर बनाए रखना चाहिए, और ऐप लोड होने पर अपने स्टोर को स्थानीय स्टोरेज से इनिशियलाइज़ करना चाहिए।

न्यूनतम Redux स्टोर हठ उदाहरण:

लोकलस्टोरेज में लगातार स्टेट अपडेट को हैंडल करने के लिए एक "मिडिल" कंपोनेंट बनाएं।

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 भी है। वहाँ पैकेज है जो दृढ़ता से जारी रहने और आरंभ करने के लिए थोड़ा सा अनुकूलन प्रदान करता है।