Tutorial Redux Toolkit Slice menggunakan framework NextJS
Agik Setiawan
Full Stack Developer
April 4th 2023
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
© 2023 PT Koding Digital Indonesia. All rights reserved