#3 Redux

개인적으로 개념을 다지기 위한 리덕스 세번째 시간

아주 간단한 카운트를 react-redux로 구현해보자.

먼저 react와 redux 환경 세팅을 만들어준 뒤 시작하는 상황! 😂
CRA가 아닌 npm으로 하나 하나 세팅을 진행한 건 스킵!

Client.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'; // store 접근을 위해

import App from './App'; // 실제 구현 컴포넌트 불러오기
import store from './store'; // store 불러오기

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.querySelector('#root'), // html 부분은 생략
);

App.jsx

import React, { useState, useEffect, useCallback } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, changeCount, INCREMENT_COUNT } from './actions/Count';

const App = () => {
  const [number, setNumber] = useState('');
  // useSelector로 store의 state의 count를 가져오기.
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  // input에 입력하는 value 값
  const onChangeNumber = useCallback((e) => {
    setNumber(e.target.value)
  },[setNumber]);
  
  return (
    <div id="container">
      <p>카운트 : {count}</p>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
      <div>
        // input 값을 count 값에 더하기
        <input value={number} onChange={onChangeNumber}/>
        // input value의 number는 action 인자로 들어간다.
        <button onClick={() => dispatch(changeCount(number))}>변경</button>
      </div>
    </div>
  );
};

export default App;

actions/count.jsx

export const INCREMENT_COUNT = 'INCREMENT_COUNT';
export const DECREMENT_COUNT = 'DECREMENT_COUNT';
export const CHANGE_COUNT = 'CHANGE_COUNT';

export const increment = () => { // 증가
  return {
    type: INCREMENT_COUNT,
  };
};

export const decrement = () => { // 감소
  return {
    type: DECREMENT_COUNT,
  };
};

// 받아온 number를 인자에 넣기
export const changeCount = (number) => { // 추가
  return {
    type: CHANGE_COUNT,
    payload: Number(number), // 빈 문자열로 받아온 후 숫자로 변경
  };
};

reucers/count.jsx

import {
  INCREMENT_COUNT,
  DECREMENT_COUNT,
  CHANGE_COUNT } from '../actions/Count';

const initialState = { // 초깃값
  count: 0,
};
const countReducer = (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT_COUNT:
      return {
        count: state.count + 1,
      };
    case DECREMENT_COUNT:
      return {
        count: state.count - 1,
      };
    case CHANGE_COUNT:
      return {
        count: state.count + action.payload, // 업데이트
      };
    default:
      return state;
  }
};

export default countReducer;

store.jsx

import { createStore, applyMiddleware } from 'redux';
import logger from 'redux-logger';
import reducer from './reducers/Count';

const middleware = [logger];

const store = createStore(reducer, applyMiddleware(...middleware));

export default store;

이렇게 아주 간단한 카운트를 react / redux로 구현해보았다.
간단하지만 개념부터 차근차근(?) 좀 더 빨리 익혀보자👏