리덕스 - 프로젝트 준비

vscode 에서 create-react-app 프로젝트를 생성하고 src 내부에 module폴더를 생성한다. 그 안에 counter.js 파일을 생성한다.

모듈 생성

moudles/counter.js에 모듈을 작성한다. 액션타입 선언, 액션생성함수, 그리고 리듀서까지 작성한다.

const INCREASE = 'INCREASE';
const DECREASE = 'DECREASE';

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

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

const initialState = 0;


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

combineReducers 생성

modules/index.js에 combineReducers 를 작성한다.

import { combineReducers} from 'redux';
import counter from './counter';

const rootReducer = combineReducers({counter});

export default rootReducer;

리덕스 적용시키기

루트 경로의 index.js에 Provider,store 생성해서 App 컴포넌트에 덮어준다.

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

const store = createStore(rootReducer);


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

컴포넌트 생성

src/componenets/Counter.js 생성

import React from 'react'

const Counter = ({number, onIncrease, onDecrease}) => {
  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  )
}

export default Counter;

number, onIncrease, onDecrease props를 받아와서 해당 number를 표시하고 버튼을 생성해서 해당 버튼을 클릭할 때마다 onIncrease, onDeacrease 함수가 호출되게 작동한다.

그럼 이 값들을 어디서 받아오느냐?

컨테이너 생성

여기서 그 값들을 보내주면 된다.
src/containers/CounterContainer생성

import React from "react";
import Counter from "../components/Counter";
import { useSelector, useDispatch} from 'react-redux';
import { decrease, increase } from "../modules/counter";

function CounterContainer() {
    const number = useSelector(state => state.counter);
    const dispatch = useDispatch();
    
    const onIncrease = () => {
        dispatch(increase());
    }

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


     return(
         <Counter  number={number} onDecrease={onDecrease} onIncrease={onIncrease}/>
     );
}

export default CounterContainer

useSelector를 사용해서 counter 리듀서의 초기 값을 불러오고 useDispatch()를 호출하는 변수를 사용해서 액션 생성함수를 디스패치하는 onIncrease와 onDecrease함수를 작성하고 그 값을 Counter컴포넌트로 전송한다.

마지막으로 App 컴포넌트에서 CounterContainer컴포넌트를 리턴하면

성공적으로 카운터가 렌더링 된 모습을 볼 수 있다.