리덕스 이해하기

리액트를 다루는 기술 개정판(https://g.co/kgs/GBwnEc)의 24장을 따라가며 작성

---

리덕스 사용에 필요한 라이브러리를 설치합니다.

yarn create react-app react-redux-tutorial
cd react-redux-tutorial
yarn add redux@4.1.2 react-redux

실습은 Ducks패턴을 사용하여 액션 타입, 액션 생성 함수, 리듀서가 하나의 파일에 다 정의되어 있는 리덕스 모듈을 작성 할 것 입니다.

 

아래의 +1, -1 버튼으로 숫자를 조작할 수 있는 카운트 프로젝트를 만들어봅시다.

1.  src폴더 아래에 modules폴더를 생성하고 counter.js파일을 생성해 줍니다.

첫번째, 액션 타입을 정의해 줍니다.

액션타입이란?

액션타입을 정의하는 이유는?

const INCREASE = 'counter/INCREASE';
const DECREASE = 'counter/DECREASE';

 

두번째, 액션 생성 함수를 정의해 줍니다.

액션 생성 함수란?

액션 생성 함수를 정의하는 이유는?

export const increase = () => ({ type: INCREASE });
export const decrease = () => ({ type: DECREASE });

 

세번째, 초기상태를 입력합니다.

const initialState = {
  number: 0,
};

 

네번째, 리듀서 함수를 정의합니다.

리듀서 함수란?

리듀서 함수를 정의하는 이유는?

function counter(state = initialState, action) {
  switch (action.type) {
    case INCREASE:
      return {
        number: state.number + 1,
      };
    case DECREASE:
      return {
        number: state.number - 1,
      };
    default:
      return state;
  }
}

 

2. src 폴더에 containers 폴더를 생성하고 그 안에 CounterContainer.jsx 파일을 생성합니다.

   Container에서는 Component와 리덕스를 연동합니다.

import Counter from '../components/Counter'
import { connect } from 'react-redux'
import { increase, decrease } from '../modules/counter';

const CounterContainer = ({ number, increase, decrease }) => {
  return <Counter number={number} onIncrease={increase} onDecrease={decrease} />
}

export default connect(
  state => ({
    number: state.counter.number
  }),
  {
    increase,
    decrease
  }
)(CounterContainer)

 

3. 리액트 애플리케이션에 리덕스를 적용합니다.

   

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './modules';

const store = createStore(rootReducer);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>,
);