react-store-persistent

readme.md

React Redux Store Persistent

Packages

• react-redux
• react-thunk
• react-persist
• redux

index.js

import React from "react";
import ReactDOM from "react-dom";
import { TodoApp } from "./TodoApp";

import { store, persistor } from "./store/store";
import { Provider } from "react-redux";
/*  */
import { PersistGate } from "redux-persist/integration/react";
import { HashRouter } from "react-router-dom";

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <HashRouter>
          <TodoApp />
        </HashRouter>
      </PersistGate>
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

rootReducer.js

import { combineReducers } from "redux";
import { todoReducer } from "./todoReducer";

export const rootReducer = combineReducers({
  content: todoReducer,

  // TODO: CAlendarReducer
});

store.js

import { applyMiddleware, compose, createStore } from "redux";
import thunk from "redux-thunk";
import { rootReducer } from "../reducers/rootReducer";
/*  */
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage"; // defaults to localStorage for web
const persistConfig = {
  key: "root",
  storage,
};
const persistedReducer = persistReducer(persistConfig, rootReducer);

const composeEnhancers = (typeof window !== "undefined" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;

/* export const store = createStore(rootReducer, composeEnhancers(applyMiddleware(thunk))); */
export const store = createStore(persistedReducer, composeEnhancers(applyMiddleware(thunk)));
export const persistor = persistStore(store);