Sesuai dengan judul artikel ini, bahwa Redux Persist yang merupakan satu dari sekian banyak keluarga library Redux memiliki fungsi untuk menyimpan Redux State Object ke dalam LocalStorage. Dengan demikian ketika aplikasi ditutup, maka state tidak hilang begitu saja. Ketika aplikasi kembali dibuka, Redux Persist akan mengembalikan state yang tersimpan di LocalStorage ke dalam Redux.

Flex-start
Tanpa Redux Persist
Center
Dengan Redux Persist

INSTALASI

Untuk mengintegrasikan Redux Persist ke dalam projek, kita bisa menggunakan perintah

npm install –save redux persist

atau

yarn add redux-persist

yang dijalankan di terminal.

PENGGUNAAN

Untuk membuat Redux Persist bekerja, kita perlu melakukan sedikit langkah tambahan ketika melakukan setup Redux. Ketika membuat Redux store, masukkan fungsi persistReducer yang berisi rootReducer ke dalam fungsi createStore. Lalu masukkan store ke dalam fungsi persistStore untuk membuat Redux State tersimpan dalam LocalStorage.

import { createStore } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import { AsyncStorage } from 'react-native'
import autoMergeLevel2 from 'redux-persist/es/stateReconciler/autoMergeLevel2'

import rootReducer from './module'

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

const persistReducers = persistReducer(persistConfig, rootReducer)
export const store = createStore(persistReducers)
export const persistor = persistStore(store)

Lalu kalian bisa mem-wrap root component kalian menggunakan [`` persistGate

import React, { Component } from "react"; import { View } from "react-native"; import { Provider } from "react-redux"; import { PersistGate } from "redux-persist/integration/react";

import { store, persistor } from "./src/redux"; import IncrementView from "./src/view/increment";

const Loading = () => (

Redux Persist is In Process to Persisted All State

);

export default class App extends Component { render() { return (

} persistor={persistor}>
    );
}

}


Nah, kita telah menyelesaikan tahap _setup_ **Redux Persist** ke dalam Redux _store_ dan _root component_. Saat ini, **Redux Persist** seharusnya sudah bisa berungsi dengan baik. Nah, sekarang saatnya untuk melakukan kustomisasi pada konfiguasi **Redux Persist** kita.

### Tentukan _State_ Apa Saja yang Akan Disimpan
**Redux Persist** menyediakan fasilitas untuk menentukan _state_ apa saja yang akan di simpan di _LocalStorage_. Secara default, semua _state_ akan di simpan apabila kita tidak melakukan konfigurasi terhadapnya. Terdapat dua properti yang bisa digunakan untuk mengkonfigurasi hal ini, yaitu ```
blacklist
``` dan ```
whitelist
```. ```
Blacklist
``` berfungsi untuk menentukan state apa saja yang tidak ingin di simpan. Sedangkan ```
whitelist
``` merupakan kebalikkannya.

const persistConfig = { key: 'root', storage: AsyncStorage, blacklist: ['increment'] }

const persistReducers = persistReducer(persistConfig, rootReducer) export const store = createStore(persistReducers) export const persistor = persistStore(store)


Properti `blacklist` maupun `whitelist` hanya menerima _string_ berformat _array_. Setiap nama _string_ yang dimasukkan harus sama dengan nama _state_ yang dideklarasikan pada `combineReducer`.

export default combineReducers({ increment });



Nah, itulah sedikit penjelasan mengenai penggunaan **Redux Persist**. Sebenarnya, tidak ada yang berubah dari cara kita menerima _state_ atau men-_dispatch_ _action_ dari Redux dalam menggunakan **Redux Persist** ini, hanya saja ada sedikit penambahan konfigurasi pada Redux _Store_. Untuk lebih jelasnya, kalian bisa langsung cek _source code_-nya [di sini](https://github.com/TheJackTenor/Persisting)