(React)카운터 Redux로 만들기 -3

가장 기본 예제인 카운터를 redux를 이용해 만들어 볼 거다
항상 리덕스를 사용할 줄 모르는 것에 부끄러움이 가득했는데 이번 기회에 타파할 예정이다.
참고 유데미 강의
React 완벽 가이드 with Redux, Next.js, TypeScript

 

(React)카운터 Redux로 만들기 -2

그전 코드는 위에 글을 가면 확인할 수 있다.

 

카운터를 늘려줄 +,- 버튼을 추가한다.

import React from 'react';
import { useSelector } from 'react-redux';

const Counter = () => {
  const counter = useSelector((state) => state.counter);
  const name = useSelector((state) => state.name);
  console.log('싼쵸확인', name);
  const toggleCounterHandler = () => {};
  return (
    <>
      <h1>Redux Counter</h1>
      <div>{counter}</div>
      <button>increment</button>
      <button>decrement</button>

      <button onClick={toggleCounterHandler}>Toggle Counter</button>
    </>
  );
};

export default Counter;

여기서 의문점은 어떻게 store폴더 안에 있는 index.js 함수에 있는 counterReducer에 있는 증가와 감소 함수를 어떻게 가져와서 사용할 수 있을까 의문점이 생길 거다.

가능하게 해주는 훅이 바로 useDispatch이다. 

그래서 아래 코드와 같이 작성해주면 사용할 수 있다.

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

const Counter = () => {
  const dispatch = useDispatch();
  const counter = useSelector((state) => state.counter);

  const incrementHandler = () => {
    dispatch({ type: 'increment' });
  };
  const decrementHandler = () => {
    dispatch({ type: 'decrement' });
  };
  const toggleCounterHandler = () => {};
  return (
    <>
      <h1>Redux Counter</h1>
      <div>{counter}</div>
      <button>increment</button>
      <button>decrement</button>

      <button onClick={toggleCounterHandler}>Toggle Counter</button>
    </>
  );
};

export default Counter;

여기서 주의할 점은 type의 value로 적은 값을 index.js안에 action.type === '글자' 값이 무조건 일치해야 동작을 하니 오타를 항상 조심해야 합니다.

 

이제만든 handler 함수를 버튼 onClick 속성에 넣어주면 이상 없이 잘 동작할 겁니다.

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

const Counter = () => {
  const dispatch = useDispatch();
  const counter = useSelector((state) => state.counter);

  const incrementHandler = () => {
    dispatch({ type: 'increment' });
  };
  const decrementHandler = () => {
    dispatch({ type: 'decrement' });
  };
  const toggleCounterHandler = () => {};
  return (
    <>
      <h1>Redux Counter</h1>
      <div>{counter}</div>
      <button onClick={incrementHandler}>increment</button>
      <button onClick={decrementHandler}>decrement</button>

      <button onClick={toggleCounterHandler}>Toggle Counter</button>
    </>
  );
};

export default Counter;

결과화면

 

 

증가도 잘 작동하고, 감소도 잘 작동합니다.