Как мне сохранить свое состояние в localstorage в моем приложении Redux?

Question

Я пытаюсь построить клон Trello, используя React и Redux.

Подробная информация о приложении:

• Приложение состоит из 4 столбцов с именами TODO, DOING, DONE и REJECTED.
• Я могу добавить карточку в любой из 4 столбцов.
• В карточке у меня есть просто текст.
• Карты можно в дальнейшем перемещать в любой из столбцов, используя пакет под названием реагировать-Beautiful-DDD.
• Существует также кнопка удаления, прикрепленная к каждой карте, чтобы удалить добавляемую карту.

Что я пытаюсь сделать?

• У меня есть пример данных, которые сначала отображаются при первой загрузке приложения.
• Данные являются просто демонстрационными и содержат идентификатор, текстовое свойство для каждой карты.
• Я хочу использовать localalstorage для добавления карты и дальнейшего удаления карты.
• Я хочу использовать, возможно, подписку Redux для достижения этой цели.

Я делаю не имеет большого опыта работы с Redux и локальным хранилищем altogethe р. Как я могу это сделать? Любая помощь будет очень признательна и очень нужна.

У меня есть мои коды и ящик, где у меня запущено приложение. Пожалуйста, рассмотрите возможность помочь мне. https://codesandbox.io/s/small-violet-zmbtf

Answer 1

Вы должны использовать 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>
  );
};

Отредактированная проверка ниже: изменить коды и поле на:

магазин / индекс. 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);

******* редукторы / индекс. 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 индекс проекта. 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();