React Native 中使用 Redux Persist 实现 Redux State 持久化完全指南

在 React Native 应用开发中，Redux 作为一个强大的状态管理工具，被广泛使用。但是，默认情况下，Redux 的 state 是存储在内存中的，这意味着当应用关闭或重启时，state 将会丢失。为了解决这个问题，我们可以使用 Redux Persist 来持久化 Redux 的 state，以便在应用重启后能够恢复之前的状态。

1. Redux Persist 简介

Redux Persist 是一个用于持久化和恢复 Redux store 的库。它可以将 Redux 的 state 存储到各种持久化存储引擎中，例如：

AsyncStorage (React Native 默认的持久化存储)
localStorage (Web)
sessionStorage (Web)
redux-persist-filesystem-storage (React Native 文件系统存储)

Redux Persist 提供了一种简单而有效的方式来确保你的应用在重启后能够保持状态。

2. 安装 Redux Persist

首先，你需要安装 redux-persist 及其依赖。

npm install redux-persist @react-native-async-storage/async-storage
# 或者使用 yarn
yarn add redux-persist @react-native-async-storage/async-storage

注意: @react-native-async-storage/async-storage 是 React Native 社区维护的 AsyncStorage 替代方案，你需要单独安装它。

3. 配置 Redux Persist

接下来，你需要配置 Redux Persist 来持久化你的 Redux store。这通常涉及到以下几个步骤：

3.1 创建 Persist Config

persistConfig 对象用于配置 Redux Persist 的行为。你需要指定存储引擎、key 以及其他选项。

import AsyncStorage from '@react-native-async-storage/async-storage';
import { persistStore, persistReducer } from 'redux-persist';
import { createStore } from 'redux';
import rootReducer from './reducers'; // 你的 root reducer

const persistConfig = {
  key: 'root', // 存储时使用的 key，建议使用 'root'
  storage: AsyncStorage, // 使用 AsyncStorage 作为存储引擎
  // blacklist: ['navigation'], // navigation reducer 不会被持久化
  // whitelist: ['user'], // 只持久化 user reducer
};

key: 存储时使用的 key，通常设置为 'root'。
storage: 指定存储引擎。在 React Native 中，通常使用 AsyncStorage。
blacklist: 一个包含 reducer 名称的数组，这些 reducer 的 state 将不会被持久化。
whitelist: 一个包含 reducer 名称的数组，只有这些 reducer 的 state 会被持久化。如果同时设置了 blacklist 和 whitelist，whitelist 优先级更高。

3.2 创建 Persisted Reducer

使用 persistReducer 函数来创建一个持久化的 reducer。

const persistedReducer = persistReducer(persistConfig, rootReducer);

3.3 创建 Store

使用 persistedReducer 创建 Redux store。

let store = createStore(persistedReducer);
let persistor = persistStore(store);

export { store, persistor };

persistStore: 用于创建 persistor 对象，该对象用于手动控制 state 的持久化和 rehydration。

3.4 在应用中使用 Persistor

在你的应用根组件中使用 PersistGate 组件来延迟应用的渲染，直到 state 被 rehydrated。

import React from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './store'; // 你的 store
import App from './App'; // 你的主应用组件

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

export default Root;

PersistGate: 接收 persistor 对象作为 prop，并且在 rehydration 完成之前不会渲染子组件。loading prop 允许你指定在 rehydration 期间显示的加载指示器。设置为 null 则不显示任何内容。

4. 完整示例

下面是一个完整的示例，展示了如何在 React Native 中使用 Redux Persist。

4.1 创建 Reducer

例如，我们创建一个简单的 counter reducer。

// reducers/counterReducer.js
const initialState = {
  count: 0,
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1,
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1,
      };
    default:
      return state;
  }
};

export default counterReducer;

4.2 创建 Root Reducer

// reducers/index.js
import { combineReducers } from 'redux';
import counterReducer from './counterReducer';

const rootReducer = combineReducers({
  counter: counterReducer,
});

export default rootReducer;

4.3 配置 Store

// store.js
import AsyncStorage from '@react-native-async-storage/async-storage';
import { persistStore, persistReducer } from 'redux-persist';
import { createStore } from 'redux';
import rootReducer from './reducers';

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

const persistedReducer = persistReducer(persistConfig, rootReducer);

let store = createStore(persistedReducer);
let persistor = persistStore(store);

export { store, persistor };

4.4 使用 Redux

// App.js
import React from 'react';
import { View, Text, Button } from 'react-native';
import { connect } from 'react-redux';

const App = ({ count, increment, decrement }) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={increment} />
      <Button title="Decrement" onPress={decrement} />
    </View>
  );
};

const mapStateToProps = (state) => ({
  count: state.counter.count,
});

const mapDispatchToProps = (dispatch) => ({
  increment: () => dispatch({ type: 'INCREMENT' }),
  decrement: () => dispatch({ type: 'DECREMENT' }),
});

export default connect(mapStateToProps, mapDispatchToProps)(App);

4.5 根组件

// index.js 或者 App.js (取决于你的项目结构)
import React from 'react';
import { AppRegistry } from 'react-native';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './store';
import App from './App';
import { name as appName } from './app.json';

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

AppRegistry.registerComponent(appName, () => Root);

5. 常见问题

State 没有被持久化: 检查你的 persistConfig 是否正确配置，特别是 key 和 storage。确保你已经正确安装了 @react-native-async-storage/async-storage。
Rehydration 延迟: PersistGate 的 loading prop 可以让你在 rehydration 期间显示加载指示器，避免应用出现不一致的状态。
数据冲突: 如果你的应用使用了多个存储引擎，可能会出现数据冲突。建议只使用一个存储引擎，并确保你的 reducer 是幂等的。
大型 State: 持久化大型 state 可能会影响应用的性能。考虑只持久化必要的状态，并使用 blacklist 或 whitelist 来控制哪些 reducer 被持久化。

6. 高级用法

自定义转换器 (Transforms): 你可以使用转换器来在 state 被存储和恢复时对其进行修改。例如，你可以使用 encrypt-transform 来加密敏感数据。
手动 Rehydration: 你可以使用 persistor.rehydrate() 手动触发 rehydration。这在某些高级用例中可能很有用。
存储迁移 (Migrations): 当你的 state 结构发生变化时，你需要进行存储迁移。Redux Persist 提供了一些工具来帮助你处理存储迁移。

7. 总结

Redux Persist 是一个非常有用的库，可以帮助你在 React Native 应用中持久化 Redux 的 state。通过简单的配置，你可以确保你的应用在重启后能够恢复之前的状态，从而提供更好的用户体验。希望本指南能够帮助你更好地理解和使用 Redux Persist。