[Reduxtagram] Accessing dispatch and state with Redux

wesbos의 무료로 공개된 자료 https://learnredux.com/ 을 학습하며 정리한 내용입니다.

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actionCreators from '../actions/actionCreators';
import Main from './Main';

function mapStateToProps(state) {
    return {
        posts: state.posts,
        comments: state.comments
    }
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators(actionCreators, dispatch);
}
const App = connect(mapStateToProps, mapDispatchToProps)(Main);

export default App;

🦠 connect

connect는 HOC이다.
리액트 앱의 하위 컴포넌트에서 redux store에 접근하는 것을 가능하게 해주는 역할을 한다.
이 connect함수를 이용해 컴포넌트에서 redux store에 접근하고 액션을 호출할 수 있다.
이렇게 컴포넌트에 전달할 때 store만 전달하는 것이 아니라 action을 넣을 수 있는 dispatch함수까지 전달한다.
리덕스 스토어 안에 있는 상태를 props로 넣어줄 수도 있고, 액션을 디스패치 하는 함수를 props로 넣어줄 수도 있다.

const App = connect(mapStateToProps, mapDispatchToProps)(Main);

HOC

Higher Order Component
리액트 컴포넌트를 개발하는 패턴으로, 컴포넌트의 로직을 재활용할 때 유용하다.
컴포넌트를 특정 함수로 감싸서 특정 값 또는 함수를 props로 받아와 사용할 수 있도록 한다.
Hook이 도입된 이후에는 HOC를 구현하는 일은 거의 없어졌다.

🦠 mapStateToProps

mapStateToProps 는 리덕스 스토어의 상태를 조회해서 어떤 것들을 props 로 넣어줄지 정의한다.

function mapStateToProps(state) {
    return {
        posts: state.posts,
        comments: state.comments
    }
}

🦠 mapDispatchToprops

mapDispatchToProps 는 액션을 디스패치하는 함수를 만들어서 props로 넣어준다.

function mapDispatchToProps(dispatch) {
    return bindActionCreators(actionCreators, dispatch);
}

🦠 bindActionCreators

각각의 actionCreator들을 dispatch로 감싸서 바로 호출 가능한 객체로 바꾼다.

파라미터

• actionCreators: actionCreator들을 가지는 객체

• dispatch: store인스턴스에서 가져온 dispatch 함수

  • 보통 store인스턴스에서 바로 dispatch를 호출하거나 redux를 react와 함께 사용할 경우 dispatch를 함께 제공하므로 바로 호출 가능하다.
  
  
  

Reference

• connect,mapState/DispatchToProps
  https://react.vlpt.us/redux/09-connect.html
  https://selfish-developer.com/entry/connect
• bindActionCreators
  https://lunit.gitbook.io/redux-in-korean/api/bindactioncreators