redux-persist V5

在创建redux store 时，将persistReducer包装应用的rootReducer,然后传递给createStore函数。一旦store创建完成，将其传递给persistStore函数，用来确保redux状态当发生变化时能够持久化存储

// src/store/index.js
import {createStore} from 'redux';
import {persistStore, persistReducer} from 'redux-persist';
import storage from 'reduc-persist/lib/storage';
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';
import rootReducer from './reducers'; // 即combineReducers之后的rootReducer

const persistConfig = {
  key: 'root',
  storage: storage,
  stateReconciler: autoMergeLevel2 // 查看 'Merge Process' 部分的具体情况
};

const persistReducer = persistReducer(persistConfig, rootReducer);  // 包装rootReducer
export const store = createStore(persistReducer);     // 传递给createStore函数 这个export
export const persistor = persistStore(store);  // 包装store 这个也export

如果使用React,则使用 PersistGate 包裹根组建。这将延迟渲染app UI直到持久化状态取回并保存到redux中

import React from 'react';
import {Provider} from 'react-redux';
import { PersistGate } from 'redux-persist/lib/integration/react';
// 下面2种引入方式也可以
// import { PersistGate } from 'redux-persist/lib/integration/react';
// import { PersistGate } from 'redux-persist/integration/react';

// import 
import {store, persistStore} from './store';

import {RootComponent, LoadingView} from './components';

const App = () => {
    return (
        
            // loading 和 persistor是2个必需属性
            // loading={null} || loading={} LoadingView为React组件
            // 最好将loading={null}，写成loading={} 报错，原因暂不明
            
                
            
        
    )
}
export default App;

自定义存储内容 (Customizing what's Persisted)

如果不想将部分state持久化，可以将其放入黑名单(blacklist)中.黑名单是设置PersistReducer时传入的配置对象

const persistConfig = {
  key: 'root',
  storage: storage,
  blacklist: ['navigation']
};

const persistReducer = persistReducer(persistConfig, rootReducer);

export const store = createStore(persistReducer);
export const persistor = persistStore(store);

黑名单接收字符串数组。每个字符串必须匹配部分状态(传入persistReducer中reducer管理的状态)。上面的示例，如果 rootReducer通过createReducers创建，我们期望 navigation 像下面一样存在在reducer中：

combineReducers({
  auth: AuthReducer,
  navigation: NavReducer, // navigation即reducer中的状态
  notes: NotesReducer
})

白名单(whitelist)的设置和黑名单一样，除了它表示的是你想要持久化的state\

const persistConfig = {
  key: 'root',
  storage: storage,  // 或者是 AsyncStorage for React Native
  whitelist: ['auth', 'notes']
}

假如你想要将一个嵌套的属性加入黑名单怎么办？例如，假设你的state对象有一个auth key,你想将auth.currentUser持久化，而不持久化auth.isLoggingIn

为了完成这个任务，使用PersistReducer包裹AuthReducer,然后将isLoggingIn加入黑名单。这将允许共同定位持久化规则和它依附的reducer

// AuthReducer.js
import storage from 'reduc-persist/lib/storage';
import {persistReducer} from 'redux-persist';

const INITIAL_STATE = {
  currentUser: null,
  isLoggingIn: false
};

const AuthReducer = (state = INITIAL_STATE, action) => {
  // reducer 实现。。。
}

const persistConfig = {
  key: 'auth',
  storage: storage,
  blacklist: ['isLoggingIn']
};

export default AuthReducer;

如果你更喜欢将所有的持久化规则都放在一起，而不是单独放在各自的reducer中，可以考虑将其放在combineReducers函数中：

// src/reducers/index.js
import {combineReducers} from 'redux';
import storage from 'redux-persist/lib/storage';
import {persistReducer} from 'redux-persist';

import {authReducer, navReducer, notesReducer} from './reducers';

const rootRersistConfig = {
  key: 'root',
  storage: storage,
  blacklist: ['navigation']
}
const authPersistConfig = {
  key: 'auth',
  storage: storage,
  blacklist: ['isLoggingIn']
}

const rootReducer = combineReducers({
  auth: persistReducer(authPersistConfig, authReducer),
  navigation: navReducer,
  notes: notesReducer
});

export default persistReducer(rootPersistConfig, rootReducer);

合并过程

当应用启动时， redux设置一个初始状态，这之后，redux persist从storage中取回你持久化的state。然后取回的持久化state将覆盖初始的state

合并过程是自动工作的，但是你也可以手动的处理这个过程。比如，以前redux-persist版本中通常通过捕获reducers中REHYDRATE动作来管理rehydration过程，然后将action的payload存储在redux的状态中

import {REHYDRATE} from 'redux-persist';

const INITIAL_STATE = {
    currentUser: null,
    isLoggingIn: false
}

const AuthReducer = (state = INITIAL_STATE, action) => {
    switch (action.type) {
      case REHYDRATE:
        return {
            ...state,
            currentUser: action.payload.currentUser
        };
      // ...其它的情况
    }
}

REHYDRATE动作在persisted state从storage中获取之后立即通过redux-persist发送出去。如果你从REHYDRATE返回一个新的state 对象，这将是你最终的状态。就如上面所说的，现在再也不需要这样做了，除非你需要自定义状态rehydrated的方式

注意下面一些陷阱

这个陷阱来自合并过程，这和合并过程在state对变更的深入程度有关，上面提到合并过程将覆盖你的初始状态，无论你持久化了什么。下面是默认的工作方式：

// 假设初始状态如下，并且将整个状态都持久化
// initial state
{
  auth: {
    currentUser: null,
    isLoggingIn: false
  },
  notes: []
}

// 一旦应用启动
// 持久化状态
{
  auth: {
    currentUser: {firstName: 'Mark', lastName: 'Newtorn'},
    isLoggingIn: false
  },
  notes: [noteA, noteB, noteC]
}

默认情况，合并过程简单的替换每个顶层的state,和下面方式类似：

const finialState = {...initialState};
finialState['auth'] = persisedState['auth'];
finialState['notes'] = persisedState['notes'];

这通常没什么问题，但是假如你想发布一个新版本的app,并且将初始状态设置如下：

const INITIAL_STATE = {
  currentUser: null,
  isLoggingIn: false,
  error: ''
}

很明显你想在最终state中包含新的 error key.但是持久化状态对象中不存在这个error key, 它将在rehydration过程中完全的替换你的初始状态，因此error key不会添加进去。

解决办法是告诉 PersistReducer合并 two-level 深度。在最上面，你可能在root PersistReducerzhong 注意到了神秘的 stateReconciler 设置

import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';
const persistConfig = {
 key: 'root',
 storage: storage,
 stateReconciler: autoMergeLevel2  // 神秘的stateReconciler
};

autoMergeLevel2 就是告诉 PersistReducer合并 two-level 深度。对auth 状态，这意味着合并过程首先复制一份初始的auth state,然后只覆盖auth对象中持久化的keys.由于 error 还没有持久化，因此不会被丢弃。

重要的是，我们需要知道PersistReducers默认是 autoMergeLevel1,这表示替换持久化顶层的状态。如果你没有一个单独的PersistReducer管理持顶层keys的持久化状态，你可能需要使用 autoMergeLevel2.

另外，redux-persist的作者意识到，选择 autoMergeLevel1还是 autoMergeLevel2让人感到困惑，因此他创建了一个叫 persistCombineReduers的函数来简化这个过程。这个函数的实现只有2行代码，就是简单的给PersitReducer返回autoMergeLevel2,我个人偏好是自己去管理level,而不是用这个函数。当然这取决于你自己。

高级自定义

Transforms

转换允许你自定义持久化和rehydrated 的state object。

当state对象被持久化，它首先使用 JSON.stringify() 序列化state.如果你的部分state对象不能映射为JSON对象，则序列化过程可能出错。例如，js Set 数据类型在JSON中不存在，但你试着通过上面的方式序列化时，Set类型的数据将转换为一个空的对象。这可能不是你所期望的。

下面是一个成功转换Set数据类型的转换(transform),它简单的将其转换为一个数组然后使用时再转换回来。

import {createTransform} from 'redux-persist';

const SetTransform = createTransform(
  // 在state被序列化和持久化的过程中进行转换
  (inboundState, key) => {
    // 将set转换为array
    return {...inboundSate, mySet: [...inboundState.mySet]};
  },
  // rehydrated的时候转换
  (outboundState, key) => {
      return {...outboundState, mySet: new Set(outboundState.mySet)}
  },
  // 定义需要被转换的reducer
  {whitelist: ['someReducer']}
)
export default SetTransform;

createTransform函数接收3个参数：

state持久化之前调用的函数
持久化数据转变为state前调用的函数(也称之为 rehydrated)
一个配置对象

现在我们将transforms添加到 PersistReducer的配置对象中：

import storage from 'redux-persist/lib/storage';
import { SetTransform } from './Transforms';

const persistConfig = {
  key: 'root',
  storage: storage,
  transform: [SetTransform]  // 添加转换函数
}

// ...

文章来源：

The Definitive Guide to Redux Persist V5

How to use Redux Persist when migrating your states
Redux-persist: The Good Parts

redux-persist V5

自定义存储内容 (Customizing what's Persisted)

合并过程

注意下面一些陷阱

高级自定义

你可能感兴趣的:(redux-persist V5)