React+Redux를 이용한 count 증가, 감소

Redux란 상태 관리 라이브러리를 이용해 count를 증가, 감소시켜보겠다.

src폴더 내에 Actions,Reducers, Store 폴더 세 개를 만들어준다.

Actions

Action폴더 내에 index.js파일을 만든다.

index.js

// action type 정의
export const INCREASE = 'INCREASE';
export const DECREASE = 'DECREASE';

// action 생성 함수 정의
export const increase = () => {
  return {
    type: INCREASE,
  };
};

export const decrease = () => {
  return {
    type: DECREASE,
  };
};

Reducers

index.js

import { initialState } from './initialState.js';
import { INCREASE, DECREASE, increase, decrease } from '../Actions';

//상태에 변화를 일으키는 함수
//첫 번째 파라미터는 현재 상태이고, 두 번째 파라미터는 액션 객체이다.
export const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case INCREASE:
      return state + 1;
    case DECREASE:
      return state - 1;
    case 'SET_NUMBER':
      return action.payload;
    default:
      return state;
  }
};

initialState.js

//초기 상태 정의
export const initialState = 1;

Store

index.js

import { legacy_createStore as createStore } from 'redux';
import { counterReducer } from '../Reducers';
//Store 생성
export const store = createStore(counterReducer);

App.js

import React from 'react';
import './style.css';
import { useSelector, useDispatch } from 'react-redux';
import { increase, decrease } from './Actions';

export default function App() {
  const state = useSelector((state) => state);
  const dispatch = useDispatch();
  const plusNum = () => {
    dispatch(increase());
  };

  const minusNum = () => {
    dispatch(decrease());
  };

  return (
    <div className="container">
      <h1>{`Count: ${state}`}</h1>
      <div>
        <button className="plusBtn" onClick={plusNum}>
          +
        </button>
        <button className="minusBtn" onClick={minusNum}>
          -
        </button>
      </div>
    </div>
  );
}

index.js

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import { Provider } from 'react-redux';
import { store } from './Store';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

전체적인 흐름

1. + 버튼을 클릭하면, plusNum함수가 실행된다.
2. dispatch에서 액션 생성자를 사용해서 Reducer를 호출한다.
3. action.type이 INCREASE이므로 state+1를 return하게 된다.
4. useSelector를 이용해 가져온 state값은 2가 되어 출력된다.

코드 확인

https://stackblitz.com/edit/react-c3said?file=src/App.js