灏天阁

React 持久化 Redux Persist

· Yin灏

Redux Persist 是一个用于在 Redux 应用程序中持久化存储和恢复状态的库。使用 Redux Persist，我们可以方便地将 Redux Store 中的状态保存到本地存储中，并在应用程序重新加载时恢复这些状态。

下面是 Redux Persist 如何使用的笔记以及示例代码和注释。

安装

首先，安装 redux-persist:

npm install redux-persist

配置 Store

接下来，在创建 Redux Store 之前，我们需要配置 Redux Persist。在这个例子中，我们将使用localStorage作为持久化存储引擎。

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 const store = createStore(persistedReducer);
export const persistor = persistStore(store);

Config 选项

在上面的代码中，我们使用persistReducer函数将 Redux Store 的根 reducer 和一个persistConfig对象传递给 Redux Persist。persistConfig对象定义了一些配置选项，包括持久化存储引擎（在这里是localStorage）和 key（用于标识存储在本地存储中的数据）。其他可用选项包括以下内容：

const persistConfig = {
  key: "root", // 标识存储在本地存储中的数据
  storage, // 持久化存储引擎，默认是localStorage
  whitelist: ["auth"], // 白名单，只持久化指定reducer的状态
  blacklist: ["counter"], // 黑名单，不持久化指定reducer的状态
  transforms: [myTransform], // 转换器，可以自定义转换函数来改变持久化存储的数据格式
};

持久化和恢复 State

现在，当 Redux Store 更新时，我们需要确保这些更新也被保存到本地存储中。为了做到这一点，我们可以使用persistStore函数：

import { persistStore } from "redux-persist";
import { store } from "./store";
const persistor = persistStore(store);

persistStore函数返回一个持久化存储对象，它用于异步地加载并恢复之前保存在本地存储中的 Redux Store 状态。

完整示例

最后，这里是一个完整的 Redux Persist 示例代码，包括 Redux Store 配置、Redux Action 和 Reducer 以及组件渲染：

import React from "react";
import ReactDOM from "react-dom";
import { Provider, connect } from "react-redux";
import { createStore } from "redux";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";

// Redux Action Types
const INCREMENT = "INCREMENT";

// Redux Actions
const increment = () => ({
  type: INCREMENT,
});

// Redux Reducer
const initialState = { counter: 0 };
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT:
      return { ...state, counter: state.counter + 1 };
    default:
      return state;
  }
};

// Redux Persist Config
const persistConfig = {
  key: "root",
  storage,
};

// Redux Persist Reducer
const persistedReducer = persistReducer(persistConfig, reducer);

// Create Redux Store with Persisted Reducer
const store = createStore(persistedReducer);
const persistor = persistStore(store);

// React Component
const Counter = ({ counter, increment }) => (
  <div>
    <p>Counter: {counter}</p>
    <button onClick={increment}>Increment</button>
  </div>
);

// Connect React Component to Redux Store
const mapStateToProps = (state) => ({
  counter: state.counter,
});
const mapDispatchToProps = { increment };
const ConnectedCounter = connect(mapStateToProps, mapDispatchToProps)(Counter);

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

这个示例创建了一个简单的计数器应用程序，使用 Redux 和 React 实现。在这个示例中，我们使用了 Redux Persist 来持久化存储 Redux Store 的状态。具体来说，我们：

  • 创建一个 Redux Store，使用persistReducer函数将根 reducer 和一个persistConfig对象传递给 Redux Persist，从而创建一个新的持久化存储 reducer。
  • 使用persistStore函数异步加载并恢复之前保存在本地存储中的 Redux Store 状态。
  • 创建一个 React 组件Counter，它显示当前计数器的值，并包含一个按钮，点击按钮会派发一个 Redux Action。
  • 通过将Counter组件连接到 Redux Store，使其可以访问 Store 中的状态和操作函数。
  • 将ConnectedCounter组件渲染到 DOM 中。

当应用程序重新加载时，Redux Persist 会自动从本地存储中恢复之前保存的状态。这意味着即使用户刷新页面或关闭浏览器，应用程序中的状态也会得以保留。

- Book Lists -