Pakai redux-toolkit dan redux-persist di Next.js

Hai, kali ini gue bakalan share ke kamu cara implementasi redux di Next.js, Gue pakai redux-toolkit, karena ini mudah untuk di gunakan dan membantu untuk fast development.

Kalo redux-persist ini kegunaan nya untuk menyimpan redux store ke dalam localStorage, sehingga datanya tidak hilang saat browser di close, ini cocok untuk user authorization.

Langsung aja eksekusi.

1. Install dulu Next.js nya. Dokumentasi dari Next.js cek disini https://nextjs.org/docs/getting-started

npx create-next-app@latest

Root project

2. Lalu install juga redux persist dan redux-toolkit

npm i --save redux-persist react-redux @reduxjs/toolkit

3. Karena gue menggunakan Next.js , maka harus menginstall satu library lagi bernama next-redux-wrapper

npm i --save next-redux-wrapper

Begini isi dari file package.json

4. Sekarang buat folder bernama redux dan buat sub folder dengan nama auth dan store, isi folder auth adalah authSlice.js dan isi folder store adalah store.js , seperti gambar dibawah ini.

Struktur folder

5. Code dari file authSlice.js adalah sebagai berikut.

import { createSlice } from '@reduxjs/toolkit';

export const initialState = {
   isLogin: false,
};

const authSlice = createSlice({
   name: 'auth',
   initialState,
   reducers: {
      setLogin(state, action) {
         state?.isLogin = action?.payload?.isLogin;
      },
   },
});

export const { setLogin } = authSlice.actions;

const authReducer = authSlice.reducer;
export default authReducer;

Kelebihan menggunakan redux-toolkit adalah lebih simpel code nya, kita bisa menggabungkan antara action dan reducer dalam satu file.

6. Lalu buat juga code di dalam file store.js

import { combineReducers, configureStore } from '@reduxjs/toolkit';
import authReducer from '../auth/authSlice';
import storage from 'redux-persist/lib/storage';
import { persistStore, persistReducer, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER } from 'redux-persist';

const persistConfig = {
   key: process.env.NEXT_PUBLIC_FINGERPRINT_NAME,
   storage,
   whitelist: ['auth'],
};

const rootReducer = combineReducers({
   auth: authReducer,
});

const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = configureStore({
   reducer: persistedReducer,
   middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware({
         serializableCheck: {
            ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
         },
      }),
});

const persistor = persistStore(store);
export { store, persistor };

Nah dalam code di atas, gue menggunakan redux-persist untuk menyimpan redux store. Gue juga mengcombine reducernya, untuk saat ini hanya ada satu aja yaitu authReducer.

Untuk key yang ada di dalam persistConfig, itu gue menggunakan file .env ya, tujuan nya biar lebih secure. Pastikan kamu udah membuat file .env.local di project Next.js kamu.

Isi dari file .env.local

asik_asik_joz bisa kamu ubah sesuai keinginan kamu. Jangan lupa di sembunyikan menggunakan .gitignore

.env*.local

Isi dari file .gitignore

Wajib di run ulang Next.js nya setelah membuat atau mengubah file .env

7. Sekarang gue akan edit file _app.js yang ada di dalem folder pages.

import '../styles/globals.css';
import { persistor, store } from '../redux/store/store';
import withRedux from 'next-redux-wrapper';
import { PersistGate } from 'redux-persist/integration/react';

function MyApp({ Component, pageProps }) {
   return (
      <PersistGate loading={null} persistor={persistor}>
         <Component {...pageProps} />
      </PersistGate>
   );
}
const makeStore = () => store;
export default withRedux(makeStore)(MyApp);

Gua mengimport persistor dan store dari file store yang udah dibuat tadi. Karena menggunakan Next.js maka harus di wrap menggunakan next-redux-wrapper .

8. Sekarang kita coba consume redux yang sudah di buat, gue mengubah file index.js di dalam folder pages.

import { useDispatch, useSelector } from 'react-redux';
import styles from '../styles/Home.module.css';
import { setLogin } from '../redux/auth/authSlice';

export default function Home() {
  const { isLogin } = useSelector((state) => state.auth);
  const dispatch = useDispatch();

  function handleAuth(type = 'logout') {
     if (type === 'logout' || type === 'login') {
     dispatch(setLogin({ isLogin: type === 'login' ? true : false }));
     }
  }
  
  return (
     <div className={styles.container}>
        <p>Status kamu : {isLogin ? 'Berhasil login' : 'Belum login'}</p>
     <button onClick={() => handleAuth('login')}>Log in</button>
     <button onClick={() => handleAuth('logout')}>Log out</button>
    </div>
  );
}

Code diatas, udah gue buat sesimpel mungkin, yaitu mengubah kondisi state ketika login dan logout. Jika di refresh pun tidak akan berubah karena sudah menggunakan redux-persist.

Gue memanggil auth dalam redux store. Gue juga melakukan dispatch untuk melakukan perubahan.

Oke semuanya udah selesai, udah bisa langsung dipakai di project base kamu.

Terima kasih sudah membaca.

Writer: firmnardians

Download Folderin App: folderin.com