(React)카운터 Redux로 만들기 - 6

가장 기본 예제인 카운터를 redux를 이용해 만들어 볼 거다
항상 리덕스를 사용할 줄 모르는 것에 부끄러움이 가득했는데 이번 기회에 타파할 예정이다.
참고 유데미 강의React 완벽 가이드 with Redux, Next.js, TypeScript

이번강의에서는 Redux에서 ReduxToolkit를 활용해 코드를 리팩토링 할 예정이다.

ReduxToolkit은 리덕스의 몇가지 특징을 단순환 시킨 라이브러리라고 생각하면 편하다.

 

기존 index.js

import { legacy_createStore } from 'redux';

const initialState = { counter: 0, counterShow: true };
const counterReducer = (state = initialState, action) => {
  if (action.type === 'increment') {
    return {
      ...state,
      counter: state.counter + 1,
    };
  }
  if (action.type === 'increase') {
    return {
      ...state,
      counter: state.counter + action.payload,
    };
  }

  if (action.type === 'decrement') {
    return {
      ...state,
      counter: state.counter - 1,
    };
  }
  if (action.type === 'showSwitch') {
    return {
      ...state,
      counterShow: !state.counterShow,
    };
  }
  return state;
};
const store = legacy_createStore(counterReducer);

export default store;

변경 후 index.js

import { createSlice, configureStore } from '@reduxjs/toolkit';

const initialState = { counter: 0, counterShow: true };

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    // 어떤 액션을 하냐에따라 자동으로 메서드가 실행된다.
    //자동으로 기존상태를 안바꾸고 자동으로 새로운 객체를 생성해준다.
    increment(state) {
      state.counter++;
    },
    decrement(state) {
      state.counter--;
    },
    increase(state, action) {
      //action을 매개변수로 활용
      state.counter = state.counter + action.payload;
    },
    toggleCounter(state) {
      state.counterShow = !state.counterShow;
    },
  },
});

const store = configureStore({
  reducer: counterSlice.reducer,
});
//action를 보내는 것
export const counterActions = counterSlice.actions;
export default store;

변경 후 Counter.js

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { counterActions } from '../store';
const Counter = () => {
  const dispatch = useDispatch();
  const counter = useSelector((state) => state.counter);
  const toggle = useSelector((state) => state.counterShow);

  console.log('toggle', toggle);
  const incrementHandler = () => {
    dispatch(counterActions.increment());
  };

  const increaseHandler = () => {
    dispatch(counterActions.increase(10)); //{type : 유니크 식별자, payload: 10}
  };
  const decrementHandler = () => {
    dispatch(counterActions.decrement());
  };
  const toggleCounterHandler = () => {
    dispatch(counterActions.toggleCounter());
  };
  return (
    <>
      <h1>Redux Counter</h1>
      {toggle && <div>{counter}</div>}

      <button onClick={incrementHandler}>increment</button>
      <button onClick={increaseHandler}>increase by 5</button>
      <button onClick={decrementHandler}>decrement</button>

      <button onClick={toggleCounterHandler}>Toggle Counter</button>
    </>
  );
};

export default Counter;

counterActions를 import해서 생성된 메서드를 이용했다.

훨씬 코드도 간결해지고 유지보수가 쉬워졌다는 생각이든다.