javascript - 如何在我的 Redux 应用程序的本地存储中存储我的状态?
问题描述
我正在尝试使用 React 和 Redux 构建一个 Trello 克隆。
申请详情:
- 该应用程序由 4 列组成,分别称为 TODO、DOING、DONE 和 REJECTED
- 我可以将卡片添加到 4 列中的任何一个。
- 在卡片中,我只有纯文本。
- 可以使用名为 react-beautiful-dnd 的包将卡片进一步移动到任何列中。
- 每张卡片上还有一个删除按钮,用于删除添加的卡片。
我想做什么?
- 我有一个示例数据,它在首次加载应用程序时首先呈现。
- 数据只是演示,包含每张卡片的 id、text 属性。
- 我想使用 localstorage 添加卡并进一步删除卡。
- 我想使用可能的 Redux subscribe 来实现这一点。
我在处理 Redux 和 localstorage 方面没有太多经验。我怎样才能做到这一点?任何帮助将不胜感激并且非常需要。
我有我的代码框,我的应用程序在其中运行。请考虑检查以帮助我。 https://codesandbox.io/s/small-violet-zmbtf
解决方案
你必须使用redux 持久化
// 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>
);
};
编辑检查如下:
将代码框更改为:
存储/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);
******* 减速器/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
}));
根项目 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();
推荐阅读
- sql - 每天查找上周订购的客户?
- reactjs - 如何将 Facebook 聊天信使添加到 Next.js?
- javascript - Redmine Plugins - Redmin Checklist 错误,.checklist() 不是函数
- html - 在正文和块后的空间中滚动
- php - FPDF - 一些特殊字符不起作用
- fasttext - fastText 可以使用比 RAM 更大的语料库进行训练吗?
- tensorflow - Opencv 和 tensorflow 的 pbtxt 文件
- android-studio - Android Studio 4.1 和 4.2.2 中缺少 Java 库选项
- performance - GPU RTX 2080 Ti tensorflow 运行速度比 CPU tensorflow 慢?
- c# - 将多种方法浓缩为一种