React Native Redux、redux-persist、immutable.js 结合实践

前言

在我的 React Native APP 架构中，我选择 Redux 作为状态管理器。同时我使用 redux-persist 进行数据持久化，使用 immutable.js 进行 Redux 状态更新。所遇到的问题是这两者的兼容，需要进行额外的设置。

在本文中我仅记录可工作的操作过程，其背后的原理还需要未来进一步研究。

首先所需要的库如下，通过 npm 或者 yarn 进行安装：

• immutable
• redux
• redux-immutable
• redux-persist
• redux-persist-transform-immutable
• redux-thunk：如果你用到异步消息的话

redux-persist 与 immutable.js 不兼容的关键在于前者无法理解后者所特有的数据结构。

而 redux-persist-transform-immutable 这个库就是利用了 redux-persist 的 transformer 机制，抹平了这个问题。

因此，我们只需要正确设置，就能让他们正常运转起来。

在这里不得不感慨 Redux 生态的架构合理性，不在于代码量的多少，关键在于是否想明白、想透彻，有时候最好的解决方案的代码其实很少。

Redux Store

以下是我的 Redux Store 的设置过程，我将注意点都写在注释当中：

// Redux 的正常用法
import { createStore, applyMiddleware, combineReducers } from "redux";
import WeightReducer from '../bots/Weight/redux/WeightReducer';
import thunk from "redux-thunk";
// redux-persist 的正常用法
import { persistStore, persistReducer } from 'redux-persist';
import { AsyncStorage } from 'react-native';
// 导入 transformer
import immutableTransform from 'redux-persist-transform-immutable';
import { createLogger } from 'redux-logger';

// 创建 Reducer
const rootReducer = combineReducers({
    // bots
    WeightReducer
    // services
});

// 创建持久化设置
const persistConfig = {
    transforms: [immutableTransform()], // 重点：配置上 immutableTransform
    key: 'root',
    storage: AsyncStorage
}

// redux-persist 的正常用法
const persistedReducer = persistReducer(persistConfig, rootReducer);

const middleWares = [];
middleWares.push(thunk);
const loggerMiddleware = createLogger({
    predicate: () => process.env.NODE_ENV === 'development',
});
middleWares.push(loggerMiddleware);

// Redux 的正常用法
const store = createStore(
    persistedReducer,
    applyMiddleware(...middleWares)
);

// redux-persist 的正常用法
export const persistor = persistStore(store)

export default store;

大功告成！是不是很简单 😆