[React] React에서 Redux 사용하기

📌 Store

src/store/index.js

// store 생성
import { createStore } from 'redux';

// reducer 생성
const counterReducer = (state = { counter: 0 }, action) => {
  switch (action.type) {
    case 'INCREASE':
      return { counter: state.counter + 1 };
    case 'DECREASE':
      return { counter: state.counter - 1 };
    default:
      return state;
  }
};

const store = createStore(counterReducer);

export default store;

---

📌 Function Component

src/components/Counter.js

import classes from './Counter.module.css';
import { useSelector, useDispatch } from 'react-redux';

/*
  ! 저장소에서 관리하는 데이터에 액세스하는 방법
  usestore도 있지만 
  useSelector가 사용하기에 더 편하다
  ? => 저장소가 관리하는 상태 부분을 우리가 자동으로 선택할 수 있기 때문
 */

const Counter = () => {
  /*
    어떤 파라미터도 전달하지 않고 대신 실행할 수 있는 dispatch function 반환
    이 함수는 Redux store에 대한 action을 보낸다.
  */
  const dispatch = useDispatch();

  /*
  리덕스가 관리하는 상태를 받는다.
  이어서 우리가 추출하려는 상태 부분을 리턴
  ! useSelector를 사용할 때 react-redux는 이 컴포넌트를 위해 리덕스 저장소에
  ! 자동으로 구독을 설정한다. 즉, 리덕스 저장소에서 데이터가 변경될 때마다
  ! 자동으로 업데이트 되고 최신 카운터를 받게 된다.

  */
  
  const counter = useSelector((state) => state.counter);

  /*
    ! dispatch function을 사용해 새로운 액션을 보내기 위해 실행한 다음 실행하게 한다.
  */
  const incrementHandler = () => {
    dispatch({ type: 'INCREASE' });
  };
  const decrementHandler = () => {
    dispatch({ type: 'DECREASE' });
  };
  const toggleCounterHandler = () => {};

  return (
    <main className={classes.counter}>
      <h1>Redux Counter</h1>
      <div className={classes.value}>{counter}</div>
      <div>
        <button onClick={incrementHandler}>INCREASE BUTTON</button>
        <button onClick={decrementHandler}>DECREASE BUTTON</button>
      </div>
      <button onClick={toggleCounterHandler}>Toggle Counter</button>
    </main>
  );
};

📌 Class Component

src/components/Counter.js

import { Component } from 'react';
import classes from './Counter.module.css';
import { connect } from 'react-redux';

/*
  함수형 컴포넌트에서는 훅을 사용하여 store에 접근했는데
  클래스 컴포넌트에서는 어떻게 접근할까?
  ! => connect를 통해 리덕스에 연결하는 데에 도움을 준다
  ! connect는 함수형 컴포넌트에서도 사용할 수 있지만 훅들을 사용하는 것이 더 편리하다.

*/

class Counter extends Component {
  incrementHandler() {
    this.props.increase();
  }

  decrementHandler() {
    this.props.decrease();
  }

  toggleCounterHandler() {}

  render() {
    return (
      <main className={classes.counter}>
        <h1>Redux Counter</h1>
        <div className={classes.value}>{this.props.counter}</div>
        <div>
          <button onClick={this.incrementHandler.bind(this)}>
            INCREASE BUTTON
          </button>
          <button onClick={this.decrementHandler.bind(this)}>
            DECREASE BUTTON
          </button>
        </div>
        <button onClick={this.toggleCounterHandler}>Toggle Counter</button>
      </main>
    );
  }
}

/*
  connect 함수를 실행해 새 함수를 리턴
  그리고 리턴을 실행! => 새로운 함수와 함께, 리턴 함수에서는 카운터를 내보냄
  
  connect 함수를 실행할 때 두 개의 매개변수(함수)가 필요함
  ! 1. 리덕스 상태를 프랍으로 맵 (저장소 데이터에 접근하기!)
        => 리덕스 상태를 받는 함수, 객체를 리턴 키를 props로 사용할 수 있을 것
  ! 2. 디스패치 함수 (=== useDispatch)
        => 디스패치 함수를 프랍에 저장
        => 객체를 리턴 키가 props 이름이고 컴포넌트에서 그 이름으로 사용 가능
*/

const mapStateToProps = (state) => {
  return {
    counter: state.counter,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    increase: () => dispatch({ type: 'INCREASE' }),
    decrease: () => dispatch({ type: 'DECREASE' }),
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(Counter);