在開(kāi)發(fā)的過(guò)程中禁添，數(shù)據(jù)用redux管理，覺(jué)得希望將數(shù)據(jù)持久化保存桨踪，也就是說(shuō)當(dāng)用戶下一次打開(kāi)app或網(wǎng)站的時(shí)候老翘，我們希望瀏覽器/APP自動(dòng)加載出上次的數(shù)據(jù)，怎么辦？有沒(méi)有一個(gè)???♂統(tǒng)一的方式铺峭？

有的墓怀，這就是簡(jiǎn)單易用的redux-persist，事情比想象的簡(jiǎn)單太多了卫键。

話不多說(shuō)傀履，上代碼！官方示例代碼：

import { PersistGate } from 'redux-persist/es/integration/react'

import configureStore from './store/configureStore'

const { persistor, store } = configureStore()

const onBeforeLift = () => {
  // take some action before the gate lifts
}

export default () => (
  <Provider store={store}>
    <PersistGate 
      loading={<Loading />}
      onBeforeLift={onBeforeLift}
      persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>
)

首先你的結(jié)構(gòu)應(yīng)該是擁有reducers的莉炉，在我的代碼中钓账，我還加入了redux-thunk中間件，如果你不懂絮宁，可以忽略這個(gè)梆暮。

 import React, { Component } from 'react';      
 import {AppRegistry} from 'react-native';      
 import { createStore ,applyMiddleware } from 'redux'
 import { Provider } from 'react-redux'     
 import App from "./src/App";       
 import reducers from './src/reducers/reducers' 
 import thunk from 'redux-thunk';       
 export default class CoinOnline extends Component {        
   render() {
     const store = createStore(App,applyMiddleware(thunk)); 
     return (
       <Provider store={store}>
        <App />
       </Provider>      
       );
     }
 }
AppRegistry.registerComponent('CoinOnline', () => CoinOnline);       

我是怎么應(yīng)用的？

第一步绍昂，引入我們需要的方法

import {persistStore, persistCombineReducers} from 'redux-persist';
import { PersistGate } from 'redux-persist/es/integration/react';

第二步啦粹，重新封裝reducer，用persistCombineReducers()方法加載配置和reducer

const config = {
    key: 'root',
    storage,
};
let reducer = persistCombineReducers(config, reducers);

第三步治专，在redux的<Provider></Provider>內(nèi)層嵌套<PersistGate></PersistGate>

  <Provider store={store}>
                <PersistGate persistor={persistor}>
                    <App />
                </PersistGate>
</Provider>

輕松三步卖陵，簡(jiǎn)單吧！話不多說(shuō)直接上代碼

import React, { Component } from 'react';
import {
    AppRegistry,
} from 'react-native';
import { createStore ,applyMiddleware, compose } from 'redux'
import { Provider } from 'react-redux'
import App from "./src/App";
import reducers from './src/reducers/reducers'
import thunk from 'redux-thunk';
import {persistStore, persistCombineReducers} from 'redux-persist';
import { PersistGate } from 'redux-persist/es/integration/react';

import storage from 'redux-persist/es/storage' // default: localStorage if web, AsyncStorage if react-native

const config = {
    key: 'root',
    storage,
};

function configureStore(){
    let reducer = persistCombineReducers(config, reducers);
    let store = createStore(reducer, applyMiddleware(thunk));
    let persistor = persistStore(store);
    return { persistor, store }
}
export default class CoinOnline extends Component {
    render() {
        const { persistor, store } = configureStore();
        return (
            <Provider store={store}>
                <PersistGate persistor={persistor}>
                    <App />
                </PersistGate>
            </Provider>

        );
    }
}
AppRegistry.registerComponent('CoinOnline', () => CoinOnline);

多說(shuō)一句张峰，如果createStore有需要加載多個(gè)參數(shù)泪蔫，需要用compose將其拼裝起來(lái)。

比如在測(cè)試時(shí)我還使用了remote-redux-devtools調(diào)試神器喘批，代碼如下

let store = createStore(reducer, compose(applyMiddleware(thunk),devToolsEnhancer({ realtime: true, port: 8000 })));

下次撩荣，每次啟動(dòng)之前redux-persit都會(huì)默認(rèn)先dispatch兩個(gè)動(dòng)作

PERSIT和REHYDRATE，會(huì)把上一次的redux中的states注入到當(dāng)前組件中饶深，即完成了持久化餐曹。