🐱 #12 React.js - Redux toolkit

🧩 Redux toolkit 설치

Redux toolkit를 사용하려면 설치를 해야한다

npm install @reduxjs/toolkit

Redux toolkit을 설치하면 자연스럽게 Redux가 설치된다.

🧩 Redux toolkit 적용

• 이전문법

let initialState = {
    productList: [],
    selectedItem: null,
}

function productReducer(state = initialState, action) {
    let { type, payload } = action;
    switch (type) {
        case "GET_PRODUCT_SUCCESS":
            return { ...state, productList: payload.data };
        case "GET_SINGLE_PRODUCT_SUCCESS":
            return { ...state, selectedItem: payload.data };
        default:
            return { ...state };

    }
}

export default productReducer;

이전 문법은 단점이 있다.

1. 매번 유니크한 이름을 만들어줘야 한다.
2. 매번 if else 또는 switch를 만들어줘야 하고
3. 이름에 오타도 생길 수 있다.

이러한 단점을 보완하는 것이 React toolkit에 createSlice이다.

리덕스 버전이 높아지면서 createStore를 지원하지 않는다. 이전버전을 쓰면 다음 사진과 같이 줄이 쳐저 있는것을 볼 수 있다.

그리고 이전 버전은 combinereducer를 써서 여러개를 합쳐야하고, thunk와 applyMiddleware, composeWithDevTools를 써야 했다. 하지만 Redux toolkit은 combinereducer, thunk, applyMiddleware, composeWithDevTools가 자동으로 셋업 되어 있다는 장점을 가지고 있다.

그렇다면 이전 문법과 차이를 알아보자.

• 이전 reducer

let initialState = {
    productList: [],
    selectedItem: null,
}

function productReducer(state = initialState, action) {
    let { type, payload } = action;
    switch (type) {
        case "GET_PRODUCT_SUCCESS":
            return { ...state, productList: payload.data };
        case "GET_SINGLE_PRODUCT_SUCCESS":
            return { ...state, selectedItem: payload.data };
        default:
            return { ...state };

    }
}

export default productReducer;

• redux toolkit 적용 reducer

import { createSlice } from '@reduxjs/toolkit'

let initialState = {
    productList: [],
    selectedItem: null,
}

const productSlice= createSlice({
    name : "product",
    initialState ,
    reducers : {
        getAllProduct(state, action){
            state.productList = action.payload.data;
        },
        getSingleProduct(state, action){
            state.selectedItem = action.payload.data;
        },
    },
});


export const productActions = productSlice.actions;
export default productSlice.reducer;

• 이전 store

import {createStore, applyMiddleware} from "redux";
import thunk from 'redux-thunk'
import rootReducer from "./reducers";
import { composeWithDevTools } from 'redux-devtools-extension';

let store = createStore(
    rootReducer, composeWithDevTools(applyMiddleware(thunk))
    );


export default store;

이전 store는 따로 combinereducer가 있어야 했지만 Redux toolkit을 사용하면 더 편리하다.

• redux toolkit 적용 store

import { configureStore } from "@reduxjs/toolkit";
import authenticateReducer from './reducers/authenticateReducer'
import productSlice from './reducers/productReducer'

const store = configureStore({
    reducer:{
        auth : authenticateReducer,
        product : productSlice
    }
})

export default store;

• 이전 dispatch

import {productActions} from "../reducers/productReducer"



function getProducts(searchQuery) {
    return async (dispatch, getState) => {
        let url = `https://my-json-server.typicode.com/jjunseokk/hnm-site/products?q=${searchQuery}`;
        let response = await fetch(url);
        let data = await response.json();
        dispatch({type : "GET_PRODUCT_SUCCESS", payload : {data}});
    };
}

function getProductDetail(id) {
    return async(dispatch, getState) =>{
        let url = `https://my-json-server.typicode.com/jjunseokk/hnm-site/products/${id}`
        let response = await fetch(url)
        let data = await response.json();
        dispatch({type : "GET_SINGLE_PRODUCT_SUCCESS", payload : {data}});
    };
}


export const productAction={getProducts, getProductDetail};

• redux toolkit 적용 dispatch

import {productActions} from "../reducers/productReducer"



function getProducts(searchQuery) {
    return async (dispatch, getState) => {
        let url = `https://my-json-server.typicode.com/jjunseokk/hnm-site/products?q=${searchQuery}`;
        let response = await fetch(url);
        let data = await response.json();
        dispatch(productActions.getAllProduct({data}));
    };
}

function getProductDetail(id) {
    return async(dispatch, getState) =>{
        let url = `https://my-json-server.typicode.com/jjunseokk/hnm-site/products/${id}`
        let response = await fetch(url)
        let data = await response.json();
        dispatch(productActions.getSingleProduct({data}));
    };
}


export const productAction={getProducts, getProductDetail};

Redux toolkit을 사용하면 더 편리하게 사용할 수 있는 장점이 있다.