Tải lại trình duyệt:Không quay lại trang đã chọn, chuyển đến trang chủ mặc định - ReactJs

Bạn nên duy trì trạng thái redux của mình ở bộ nhớ cục bộ khi nó cập nhật và khởi chạy cửa hàng của bạn từ bộ nhớ cục bộ khi tải ứng dụng.

Ví dụ về độ bền của cửa hàng Redux tối thiểu:

Tạo thành phần "trung gian" để xử lý các cập nhật trạng thái liên tục cho 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;
};

index - bọc App thành phần với tư cách cửa hàng.

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')
);

Khởi tạo trạng thái từ bộ nhớ cục bộ. Nếu không có khóa "myState" hoặc quá trình phân tích cú pháp trả về null sau đó là đối tượng trống ({} ) sẽ được sử dụng làm dự phòng.

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;

Ngoài ra còn có redux-dai dẳng gói ra khỏi đó cung cấp một chút tùy chỉnh cho những gì được duy trì và khởi tạo từ lâu.