React Redux에서 connect와 bindActionCreators 사용하기

• React에서 Hook을 사용하지 않고 Redux를 사용하는 방법을 알아봤다.
• react-redux의 connect 메서드를 통해서 전역 상태와 dispatch를 props로 전달할 수 있다.
• 추가적으로 bindActionCreators를 사용하여 자동으로 액션 함수를 dispatch로 감싸줄 수 있다.
• bindActionCreators는 필수적으로 사용할 필요는 없지만, 코드를 간단하게 만들어준다.
• connect로 연결한 상태와 dispatch 함수는 props를 통해 받아와 사용할 수 있다.

import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import { addOrderAction } from "../actions/ordersAction";
import DispatchTest from "./DispatchTest";

function ReduxTest({ orders, addOrderAction }) {
  return (
    <div>
      <h3>{JSON.stringify(orders)}</h3>
      <DispatchTest onAction={addOrderAction} />
    </div>
  );
}

const mapStateToProps = (state) => ({
  orders: state.ordersReducer.orders,
});

const mapDispatchToProps = (dispatch) => ({
  onAddOrderAction: (data) => dispatch(addOrderAction(data)),
});

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

addOrderAction

• bindActionCreators를 사용하면, mapDispatchToProps를 다음과 같이 작성할 수 있다.
• 자동으로 action 함수 바깥에 dispatch를 감싸주어 그대로 사용할 수 있게 해준다.
• action 함수는 action 객체를 반환하는데 이 action 함수를 인자로 갖는 dispatch 함수를 반환하는 함수이기에 결과적으로 bindActionCreators로 만들어진 함수에 데이터 인자만 전달하면 해당 action의 dispatch가 실행된다.

const mapDispatchToProps = (dispatch) =>
  bindActionCreators({ addOrderAction }, dispatch);

 

React-Redux docs : https://react-redux.js.org/api/connect

Connect | React Redux