How do I store my state in localstorage in my Redux application?

问题

I am trying to build a Trello clone using React and Redux.

Details of the application:

The application consists of 4 columns called TODO, DOING, DONE and REJECTED
I can add card to any of the 4 columns.
In the card I have just plain text.
The cards can be further moved into any of the columns using a package called react-beautiful-dnd.
There is also a delete button sticked to each card to delete the card which is added.

What I am trying to do?

I have a sample data which is first rendered when the application is first loaded.
The data is just demo, and contains id, text property for each and every card.
I want to use localstorage to add the card and further delete the card.
I want to use possibly Redux subscribe to achieve this.

I do not have much experience in dealing with Redux and localstorage altogether. How can I do this? Any help would be really appreciated and much required.

I have my codesandbox where I have my application running. Please consider checking out to help me out. https://codesandbox.io/s/small-violet-zmbtf

回答1:

You have to use redux persist

// configureStore.js

import { createStore } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web

import rootReducer from './reducers'

const persistConfig = {
  key: 'root',
  storage,
}

const persistedReducer = persistReducer(persistConfig, rootReducer)

export default () => {
  let store = createStore(persistedReducer)
  let persistor = persistStore(store)
  return { store, persistor }
}

// App.js

import { PersistGate } from 'redux-persist/integration/react'

// ... normal setup, create store and persistor, import components etc.

const App = () => {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <RootComponent />
      </PersistGate>
    </Provider>
  );
};

Edited check below: change codesandbox to:

store/index.js:

// store/index.js:
import { createStore } from "redux";
import { persistStore } from "redux-persist";
import rootReducer from "../reducers";

export const store = createStore(rootReducer);

export const persistor = persistStore(store);

******* reducers/index.js:

// reducers/index.js:
import { combineReducers } from "redux";
import { persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import listReducers from "./listReducers";

const persistConfig = {
  key: "root",
  storage,
  whitelist: ["lists"]
};

export default persistReducer(persistConfig, combineReducers({
  lists: listReducers
}));

root project index.js:

// index.js:
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { store, persistor } from "./store";
import "./styles/main.scss";

import App from "./components/App";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(
  <Provider store={store}>
    <PersistGate persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById("root")
);

serviceWorker.unregister();

来源：https://stackoverflow.com/questions/60023754/how-do-i-store-my-state-in-localstorage-in-my-redux-application

标签

javascript

reactjs

redux