Aditya Pratama

Redux Persist adalah sebuah dependensi yang memungkinkan Anda untuk menyimpan data dari state aplikasi ke dalam storage ponsel. Dengan menggunakan Redux Persist, Anda dapat memastikan bahwa data yang diperlukan tetap tersimpan meskipun aplikasi ditutup atau ponsel dimatikan. Ini sangat berguna jika Anda ingin menyimpan data pengguna, preferensi aplikasi, atau informasi lain yang perlu tetap tersedia setelah aplikasi dijalankan kembali.

Menggunakan Redux Persist sangat mudah, karena Anda hanya perlu mengikuti beberapa langkah sederhana untuk mengkonfigurasikannya di aplikasi React Native Anda. Selain itu, Redux Persist juga menyediakan fitur purge untuk membersihkan storage sebelumnya, yang sangat berguna saat development.

Mulai dengan memasang dependensi yang diperlukan dengan menjalankan perintah npm install --save redux react-redux redux-persist atau yarn add redux react-redux redux-persist di terminal.

Buat struktur direktori untuk proyek Anda, misalnya seperti ini:

project
│   App.js
│
└───src
    ├───actions
    ├───reducers
    ├───screens
    ├───store

Di dalam direktori src/actions, buat file bernama index.js yang berisi tindakan yang akan Anda gunakan di aplikasi Anda. Misalnya, jika Anda ingin menyimpan data pengguna, Anda bisa membuat tindakan seperti ini:

// src/actions/index.js

export const setUser = user => ({
  type: 'SET_USER',
  user
});

export const removeUser = () => ({
  type: 'REMOVE_USER'
});

Di dalam direktori src/reducers, buat file bernama index.js yang berisi reducer yang akan menangani tindakan yang telah Anda definisikan. Reducer ini akan mengubah state aplikasi sesuai dengan tindakan yang dilakukan. Misalnya, untuk menangani tindakan SET_USER dan REMOVE_USER, Anda bisa membuat reducer seperti ini:

// src/reducers/index.js

const initialState = {
  user: null
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_USER':
      return {
        ...state,
        user: action.user
      };
    case 'REMOVE_USER':
      return {
        ...state,
        user: null
      };
    default:
      return state;
  }
};

export default reducer;

Di dalam direktori src/store, buat file bernama index.js yang berisi konfigurasi untuk mengelola state aplikasi menggunakan Redux. Tambahkan juga dependensi redux-persist yang telah Anda pasang sebelumnya untuk menyimpan state aplikasi ke dalam storage ponsel.

// src/store/index.js

import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web and AsyncStorage for react-native

import reducer from '../reducers';

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

const persistedReducer = persistReducer(persistConfig, reducer);

export default () => {
let store = createStore(persistedReducer);
let persistor = persistStore(store);
return { store, persistor };
};

Di dalam file `App.js`, impor dependensi yang diperlukan dan jalankan konfigurasi store yang telah Anda buat. Jangan lupa untuk menyertakan `persistor.purge()` pada saat aplikasi dijalankan untuk membersihkan storage sebelumnya (hanya perlu dilakukan sekali saja, biasanya pada saat development).

// App.js

import React from 'react';
import { PersistGate } from 'redux-persist/integration/react';
import { Provider } from 'react-redux';
import configureStore from './src/store';

const { store, persistor } = configureStore();

// Purge stored data
persistor.purge();

const App = () => (
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      {/* Your app components go here */}
    </PersistGate>
  </Provider>
);

export default App;

Selanjutnya, Anda bisa menggunakan tindakan dan state yang telah Anda definisikan di komponen aplikasi Anda dengan mengimpor dependensi react-redux dan menggunakan useSelector dan useDispatch. Misalnya, untuk mengambil data pengguna yang tersimpan di state dan mengubahnya, Anda bisa melakukan hal seperti ini:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { setUser, removeUser } from './src/actions';

const UserProfileScreen = () => {
  const user = useSelector(state => state.user);
  const dispatch = useDispatch();

  const handleSetUser = () => {
    dispatch(setUser({ name: 'John Doe' }));
  };

  const handleRemoveUser = () => {
    dispatch(removeUser());
  };

  return (
    <>
      {user ? (
        <>
          <Text>{user.name}</Text>
          <Button title="Remove user" onPress={handleRemoveUser} />
        </>
      ) : (
        <Button title="Set user" onPress={handleSetUser} />
      )}
    </>
  );
};

export default UserProfileScreen;

Dengan menggunakan Redux Persist, data pengguna yang tersimpan di state akan disimpan secara otomatis ke dalam storage ponsel, sehingga tidak perlu menyimpan data tersebut secara manual.