redux를 쉽게 사용하기(reduxjs/toolkit)

vuex를 사용해보았다면 알겠지만 vuex에 비해 redux는 복잡하고 작성해야할 코드들이 많아 보인다.

 

조금 더 직관적으로 사용할 수 있는 것이 reduxjs/toolkit이다.

 

기존에 action, reducer를 나누어서 정의하던 것을 한 번에 작성할 수 있다.

 

다음 코드를 보면 couter라는 곳에서 value라는 state를 관리하고 있는 것을 한 눈에 알 수 있다.

그리고 increment, decrement를 통해 +1, -1을 하는 것도 바로 파악 가능하다.

컴포넌트에서는 dispatch(increment()) 와 같이 사용하면 끝이다.

 

// counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

export const slice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: state => {
      state.value += 1;
    },
    decrement: state => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = slice.actions;

export const incrementAsync = amount => dispatch => {
  setTimeout(() => {
    dispatch(incrementByAmount(amount));
  }, 1000);
};

export const selectCount = state => state.counter.value;

export default slice.reducer;

 

 

다음은 컴포넌트에서 사용하는 방식이다. vuex 사용했던 분이라면 비슷한 것을 알 수 있을 것이다. increment를 가져와서 dispatch(increment())로 사용해주면 끝이다.

//Counter.js
import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import {
  decrement,
  increment,
  incrementByAmount,
  incrementAsync,
  selectCount,
} from './counterSlice';
import styles from './Counter.module.css';

export function Counter() {
  const count = useSelector(selectCount);
  const dispatch = useDispatch();
  const [incrementAmount, setIncrementAmount] = useState('2');

  return (
    <div>
      <div className={styles.row}>
        <button
          className={styles.button}
          aria-label="Increment value"
          onClick={() => dispatch(increment())}

 

처음 redux의 컨셉을 이해하기 조금 난해한 부분이 있었다. action type, action, reducer 와 같은 용어들이 vuex랑 컨셉이 조금 다른 것처럼 느껴져서 헷갈렸는데 reduxjs/toolkit을 사용하니 거의 똑같은 형태가 되었다.

물론 vuex에는 action으로 비동기처리도 지원하지만 redux에서는 동기가 기본적인 컨셉인 것으로 보인다. 어떤 하나를 알고 그 기준에 따라 이해하면 이해하는 속도가 훨씬 빨라지는 것 같다. 추후 디테일한 redux 컨셉은 포스팅 하겠습니다.

 

참고한 사이트

redux-toolkit.js.org/tutorials/overview

Tutorials Overview | Redux Toolkit

codesandbox.io/s/infallible-kirch-lrfbw?file=/src/features/counter/Counter.js:0-617

infallible-kirch-lrfbw - CodeSandbox

dev.to/chrisachard/learn-redux-toolkit-in-10-steps-2g88

Learn redux-toolkit in 10 steps

kyounghwan01.github.io/blog/React/redux/redux-toolkit/#%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

Redux Toolkit을 사용하여 간단하게 상태 관리하기,reselect, redux, react, immer, redux-action, FSA, react-redux 사