[6주차] 리액트숙련: Redux 로 카운터 만들기 - useDispatch

Redux 흐름

내가 이해한대로 그린 redux 흐름 (잘못된 부분이 있으면 알려주세요)

그림으로 표현한 Redux의 흐름

 

 

 

Redux 로 카운터 만들기

+1, -1 버튼 동작 구현하기

 

1. 기본 세팅 : configStore 파일

• Reducer를 모은 rootReducer 선언하기
• rootReducer로 store 만들기
• store export 하기

src/config/configStore.js

import {createStore} from "redux";
import {combineReducers} from "redux";

const rootReducer = combineReducers({
  
});
const store = createStore(rootReducer);

export default store;

 

 

2. UI 만들기

• 일단 화면에 보여질 버튼과 버튼 이벤트 후에 표시될 결과가 나오는 UI를 만든다.

App.jsx

function App() {

return(

<div>
  <div>
    현재 카운트:
  </div>
  <button>+</button>
  <button>-</button>
</div>

);

}

 

 

3. 기본 세팅 : counter.js 파일

• 초기 상태값 정하기
• 리듀서 작성하기
• 리듀서 안에 case, 액션타입 작성하기
• counter export 하기

const initialState = {
  number : 0,
};

const counter = (state = initialState, action) => {
  switch (action.type){
    case "PLUS_ONE":
      return {
        number: state.number + 1,
      }// 액션 타입이 서술되어있음
    case "MINUS_ONE":
      return {
        number: state.number -1,
      }
    default:
      return state;
  }
}
export default counter;

 

 

 

 

4. counter 모듈을 스토어에 연결

• configStore.js 의 const rootReducer = combineReducers({})의 객체 안에 Key-value 넣기

configStore.js 

import {createStore} from "redux";
import {combineReducers} from "redux";
import counter from "../modules/counter";

const rootReducer = combineReducers({
  counter: counter,
});
const store = createStore(rootReducer);

export default store;

 

 

 

5. store 와 module 연결확인하기

• useSelector import 하기
• useSelector 이용해 counter 의 값을 읽어온다
• App 컴포넌트 리턴의 jsx 부분에 변해야하는 숫자부분을 {}로 담아 적기 

App.jsx

import './App.css';
import { useSelector } from 'react-redux';
import { useDispatch } from 'react-redux';

function App() {

  const counter = useSelector((state)=> {
    return state.counter;
  });


  return (
    <div>
      <div>
        현재 카운트: {counter.number}
      </div>
      <button >+</button>
      <button>-</button>
    </div>
  );
}

export default App;

 

 

 

 

6. 이벤트 추가하기, Dispatch 

• Dispatch import 하기

버튼의 클릭 이벤트를, 그 액션을 store에 전달하려면 Dispatch를 거쳐야 하기 때문에 상단에 dispatch 를 import 해온다.

import {useDispatch} from 'react-redux';

• 버튼에 onClick 이벤트 주기

import './App.css';
import { useSelector } from 'react-redux';
import { useDispatch } from 'react-redux';

function App() {

  const counter = useSelector((state)=> {
    return state.counter;
  });


  const dispatch = useDispatch();


  return (
    <div>
      <div>
        현재 카운트: {counter.number}
      </div>
      <button onClick={()=>{
        dispatch(
            {
              type: 'PLUS_ONE',
            }
        ); // 인자로 액션 객체 넣기
      }}>+</button>
        <button onClick={()=> {
        dispatch(
          {
            type: 'MINUS_ONE',
          }
        )
      }}>-</button>
    </div>
  );
}

export default App;

 

 

전체코드

App.jsx

import { useDispatch, useSelector } from 'react-redux';
import './App.css';

function App() {

  // 여기에서 Store 에 접근하여, counter의 값을 읽고싶다
  // useSelector (인자로 콜백함수가 들어감, 그 함수의 인자는 스토어 안에 있는 전체 state)
  const counter = useSelector((state)=> {
    return state.counter;
  })

  console.log('counter', counter.number);

  // dispatch 가져오기
  const dispatch = useDispatch();

  return (
    <div >
      현재카운트 : {counter.number}
      <button onClick={()=>{
        // +1 을 해주는 로직을 써주면 된다.
        // dispatch 가져오기
        dispatch({
          type: 'PLUS_ONE',
          // payload : '';
        })
      }}>+</button>
      <button onClick={()=>{
        dispatch({
          type: 'MINUS_ONE',
        })
      }}>-</button>
    </div>
  );
}

export default App;

 

 counter.js

// 초기 상태값 (state)
const initialState = {
  number: 0,
};

// 리듀서 작성하기 (state에 변화를 일으키는 함수)
// (1) state를 action의 type 에 따라 변경하는 함수

// input에는 state, action을 받음
// action에는 type, value가 포함되어 있다
const counter = (state= initialState, action) => {
  console.log('state in module counter',state);
  switch (action.type){
    case "PLUS_ONE":
      return {
        number: state.number + 1,
      }
    case "MINUS_ONE":
      return {
        number: state.number -1,
      }
    default:
      return state;
  }
}

export default counter;

 

 

configStore.js

import { createStore } from "redux";
import { combineReducers } from "redux";
import counter from "../modules/counter";


const rootReducer = combineReducers({
  counter,
}); // 이 안에 리듀서를 모두 넣어야 함
const store = createStore(rootReducer);

export default store;