Tutorial Redux Toolkit Slice menggunakan framework NextJS

Halo, kali saya akan membagikan tutorial singkat cara menggunakan Redux Toolkit di dalam project NextJS. pastikan kalian sudah memiliki project menggunakan NestJS terlebih dahulu Tutorial NextJS dan TailwindCSS. kemudian install Redux Toolkit dengan perintah

yarn add @reduxjs/toolkit

atau jika menggunakan NPM

npm install @reduxjs/toolkit

kemudian install React Redux dengan perintah

yarn add react-redux

atau

npm install react-redux

kemudian buat file "store.ts" dengan isi seperti berikut

import { configureStore, createSerializableStateInvariantMiddleware, isPlain, getDefaultMiddleware } from "@reduxjs/toolkit";

const customizedMiddleware = getDefaultMiddleware({
  serializableCheck: false
})

const store = configureStore({
  reducer: {

  },
  middleware: customizedMiddleware
})
export type RootState = ReturnType<typeof store.getState>;

export default store;

setelah itu buka file "pages/_app.tsx"

tambahkan

import { Provider } from 'react-redux'

dan akan menjadi seperti

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { Provider } from 'react-redux'
import store from '../store'

function MyApp({ Component, pageProps }: AppProps) {
  return (
      <Provider store={store}>
        <Component {...pageProps} />
      </Provider>
  )
}

export default MyApp

sampai saat ini kita sudah berhasil menginstall Redux Toolkit dan juga konfigurasinya.

Selanjutnya adalah cara menggunakan redux di dalam component react

Buat folder "features/tambahkurang"

lalu buat file "features/tambahkurang/tambahkurang.slice.ts"

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

export const tambahkurang = createSlice({
    name:'tambahkurang',
    initialState:{
        total:0
    },
    reducers:{
        tambah(state){
            state.total +=1;
        },
        kurang(state){
            state.total -=1;
        }
    }
});

export const {actions} = tambahkurang;
export const {tambah,kurang} = actions;

kemudian edit file store.ts yang sudah dibuat sebelumnya menjadi seperti

import { configureStore, createSerializableStateInvariantMiddleware, isPlain, getDefaultMiddleware } from "@reduxjs/toolkit";
import { tambahkurang } from "./features/tambahkurang/tambahkurang.slice";

const customizedMiddleware = getDefaultMiddleware({
  serializableCheck: false
})

const store = configureStore({
  reducer: {
    [tambahkurang.name]:tambahkurang.reducer
  },
  middleware: customizedMiddleware
})
export type RootState = ReturnType<typeof store.getState>;

export default store;

edit file "pages/index.tsx" dan import state, action dari store yang sebelumnya sudah di buat

import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import { useDispatch, useSelector } from 'react-redux'
import { kurang, tambah } from '../features/tambahkurang/tambahkurang.slice'
import { RootState } from '../store'
import styles from '../styles/Home.module.css'

const Home: NextPage = () => {
  const dispatch = useDispatch();
  const tambahKurangState = useSelector((state: RootState) => state.tambahkurang);

  const klikTambah = () => {
    dispatch(tambah())
  }

  const klikKurang = () => {
    dispatch(kurang())
  }
  return (
    <div className={styles.container}>
      <Head>
        <title>Tambah Kurang</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className="my-5">
        
        <button className="bg-sky-600 px-5 py-3 text-white" onClick={klikKurang}>Kurang</button>
        <b className="mx-3">{tambahKurangState.total}</b>
        <button className="bg-sky-600 px-5 py-3 text-white" onClick={klikTambah}>Tambah</button>

      </div>
    </div>
  )
}

export default Home

Selamat, kita sudah belajar cara menggunakan Redux Toolkit di dalam NextJS!!!

Untuk repo bisa di download di

https://github.com/agik-setiawan/nextjs_taildwind_redux_toolkit.git

← Back to Posts