Tutorial Redux Toolkit Slice menggunakan framework NextJS

2 tahun yang lalu, 38 min read

Kali ini saya akan berbagi 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

Next jS Dockerize for Production With Standalone Mode

Dockerize aplikasi Next JS dengan Mode Standalone dengan ukuran yang lebih kecil

Menjalankan Next JS dengan HTTPS di Localhost

Pada tutorial kali ini saya akan membagikan cara mudah menjalankan Next JS dilocalhost dengan Https

Mengenal State Management dan Kegunaanya untuk Frontend Developent

State management adalah teknik yang digunakan untuk mengelola, menyimpan, dan mengakses data atau informasi secara terpusat supaya mudah dalam mengontrol data atau informasi yang dibutuhkan.

Tutorial Redux Toolkit Slice menggunakan framework NextJS

Kali ini saya akan berbagi tutorial Redux Toolkit Slice menggunakan framework NextJS

Cara menginstall project NextJS Typescript dan Tailwindcss

Kali ini saya akan mebagikan tutorial cara menginstall project NextJS Typescript dan Tailwindcss dengan mudah