State kezelés Next.js-el III.

Redux implementálása

Amikor a Reduxról beszélünk a Redux mögött álló hivatalos csapat által ajánlott Redux Toolkit használatát feltételezzük a cikk írása idején és ennek a használatát mutatjuk be a alábbiakban.

1. Az applikációnkat az _app.js file-ban a react-redux csomag által nyújtott provider-rel bewrappoljuk, amely a létrejött store-t kapja meg propként.

   import {Provider} from "react-redux"
   
   import store from "../store/index"
   import '../styles/globals.css'
   
   function MyApp({Component, pageProps}) {
        return (
        <Provider store={store}>
            <Component {...pageProps} />
        </Provider>
        )
   }
   
   export default MyApp
   

2. Létrehozzuk a slice-t, exportáljuk azt, illetve az action-jeinket

   import {createSlice} from '@reduxjs/toolkit'
   
   const iconslice = createSlice({
        name: "icon",
        initialState: {
            icon: 'moon'
        },
        reducers: {
            iconMoon: state => {
                state.icon = 'moon'
            },
            iconSun: state => {
                state.icon = 'sun'
            },
        }
   })
   
   export default iconslice
   
   export const iconAction = iconslice.actions
   

3. és bekötjük az így létrejött reducer-t a store-ba.

   import {configureStore} from '@reduxjs/toolkit'
   
   import iconslice from './icon-slice'
   
   const store = configureStore({
        reducer: {
            icon: iconslice.reducer
        }
   })
   
   export default store
   

4. Majd használjuk a store-ra kötött komponensünkben, amelynek hatására a háttérszín, ikon változik.

   import Image from 'next/image'
   import Link from 'next/link'
   import {useSelector, useDispatch} from "react-redux"
   
   import styles from '../styles/Home.module.css'
   import {iconAction} from "../store/icon-slice"
   import sun24 from "../icons/sun-24.png"
   import moon30 from "../icons/moon-30.png"
   
   export default function Home() {
   const dispatcher = useDispatch()
   let icon = useSelector(state => state.icon)
   
    function changeIcon() {
        icon.icon === "moon"
            ? dispatcher(iconAction.iconSun())
            : dispatcher(iconAction.iconMoon())
    }
   
    return (
        <div
            style={{backgroundColor: icon.icon === "moon" ? "white" : "#000000b5"}}
            className={styles.container}>
            <main className={styles.main}>
                <div className='NavBar'>
                    <Link href="/">
                        <a className='item'>Home</a>
                    </Link>
                    <Link href="/about">
                        <a className='item'>About</a>
                    </Link>
                </div>
   
                <div onClick={changeIcon} className='iconBox'>
                    <Image
                        width={30}
                        height={30}
                        objectFit="cover"
                        src={icon.icon === 'moon' ? moon30 : sun24}
                        alt="image"
                    />
                </div>
   
                <h1 className={styles.title}>
                    Welcome to <a href="https://nextjs.org">Next.js!</a>
                </h1>
   
                <p className={styles.description}>
                    Get started by editing{' '}
                    <code className={styles.code}>pages/index.js</code>
                </p>
   
                <div className={styles.grid}>
                    <a href="https://nextjs.org/docs" className={styles.card}>
                        <h2>Documentation &rarr</h2>
                        <p>Find in-depth information about Next.js features and API.</p>
                    </a>
                    <a href="https://nextjs.org/learn" className={styles.card}>
                        <h2>Learn &rarr</h2>
                        <p>Learn about Next.js in an interactive course with quizzes!</p>
                    </a>
                </div>
            </main>
        </div>
    )}
   

Az eredmény ahogy a második pont initialState-ből is látszik: Majd a hold ikonra kattintva dispatch-elődik az action

Ahogy a fentiekben is már jeleztük a Redux implementálása, használata kezdetben nehézségeket okozhat, növeli a végső JS csomag méretét, az új fejlesztők számára első körben tanulási folyamatot tesz szükségessé.

Ellenben gyorsan és könnyen bővíthető, időutazás jellegő átlátható működést biztosít (Redux DevTools), rendkívűl komplex state kezelést tesz kivitelezhetővé.

Összegzés

Minden applikáció más és más igényeket szolgál ki, amelynek velejárója, hogy mérlegelni kell, hogy az milyen egyszerű vagy komplex logikát kíván meg. Cikksorozatunkban írtunk a state szerepéről, a Next.js file struktúrájáról, prop (drilling) fúrás technikáról, annak velejáróiról, lehetséges megoldásokból pedig példát hoztunk a beépített és egy külső megoldásra. A téma komplex és sokrétű, de igyekeztünk emészthető formában tálalni azt, abban a reményben, hogy elgazítjuk olvasónkat a Next.js state kezelési lehetőségein.

Köszönjük a figyelmet.