Redux數據持久化

背景

    在開發的過程中，數據用redux管理，覺得希望將數據持久化保存，也就是說當用戶下一次打開APP或者網站的時候，我們希望瀏覽器或者APP自動加載上次的數據，怎么辦？有沒有一個統一的方式？

有的，這就是簡單易用的redux-persist,事情會比你想象中的簡單太多。

下面是官方示例代碼：

  

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>
)

 

首先你的結構應該是擁有reducers的，在我的代碼中，我還加入了redux-thunk中間件，在 Redux 應用中實現異步性。

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);  

實現步驟

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

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>內層嵌套<PersistGate></PersistGate>

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

 代碼匯總

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);

 

Tips: 

如果createStore有需要加載多個參數，需要用compose將其拼裝起來。

比如在測試的時候我還使用了remote-redux-devtools調試神器，代碼如下，

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

 

每次啟動之前reducer-persist都會默認先dispatch兩個動作

PERSIT和REHYDRATE,會把上一次的redux中的states注入到當前組件中，即完成了持久化。

 

文章就分享到這，歡迎關注“前端大神之路”