[리액트(React)] Redux with Class-based Component

// 클래스 기반 컴포넌트에서 Redux 사용

- functional component와 비슷하지만 사용이 조금 다르다.

---

1. redux, react-redux 설치

npm install redux react-redux

---

2. 저장소 생성

import { createStore } from 'redux';

const 저장소명 = createStore();

---

3. Reducer 함수 추가

const reducer함수명 = (state = 기본값, action) => {
  return {
  };
}

- 기존 state, action 2개의 parameter를 받는다.

- 새로운 상태 객체를 return 한다. (이론적으로는 다른 형태로도 가능하지만, 실제로는 객체 return)

---

4. 저장소에 reducer 함수 전달

import { createStore } from 'redux';

const 저장소명 = createStore(reducer함수명);

---

5. 컴포넌트에서 사용할 수 있게 저장소 export

import { createStore } from 'redux';

const 저장소명 = createStore(reducer함수명);
export default 저장소명;

---

6. index.js 파일에 저장소를 import 한다.

import { Provider } from 'react-redux';
import store from './store';

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

- 모든 컴포넌트에서 사용하기 위에 컴포넌트 트리의 최상단에 위치하는 index.js 파일에 수정·추가한다.

---

7. 사용하고자 하는 컴포넌트에서 connect를 import 한다.

import { connect } from 'react-redux';

- 함수형 컴포넌트에서도 connect 사용이 가능하지만 custom hook을 사용하는 게 더 편리해서 잘 사용하지 않는다.

---

8. 컴포넌트를 export할 때 connect를 호출한다.

const stateProps명 = state => {
  return 객체;
}

const dispatch함수Props명 = dispatch => {
  return {
    dispatch함수명: () => dispatch({ type: type명 }),
  };
}


export default connect(stateProps명, dispatch함수Props명)(컴포넌트명);

9. dispatch함수를 실행한다.

함수명 = () => {
  this.props.dispatch함수명();
};

---

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

class Counter extends Component {
  incrementHandler = () => {
    this.props.increment();
  };

  decrementHandler = () => {
    this.props.decrement();
  };

  toggleCounterHandler = () => {};

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

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

const mapDispatchToProps = (dispatch) => {
  return {
    increment: () => dispatch({ type: 'increment' }),
    decrement: () => dispatch({ type: 'decrement' }),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);