React Redux 정리 (Provider, connect)

틀린 부분이 있을 경우, 지적해 주시면 감사하겠습니다.

 

이번에는 React Redux에서 많이 사용되는 함수와 컴포넌트에 대해 정리하겠습니다.

 

React Redux는 리액트에서 리덕스를 사용할 수 있게 해주는 패키지 입니다.

Redux는 독립적인 상태관리 라이브러리이지만 React에서 많이 사용되는 이미지입니다(아닐 수도 있습니다)

그렇기 때문에 React에서 Redux를 사용하는 효용이 많기 때문에 이렇게 패키지가 등장하지 않았나라고 생각합니다.

 

Provider

Provider는 우리의 App이 Redux store에 접근할 수 있도록 해줍니다.

import React from 'react'
import ReactDOM from 'react-dom'

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

import App from './App'

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

Provider 컴포넌트로 App을 감싸주고 store속성 값에 생성한 Redux store를 넣어주면 됩니다.

connect()

React Redux는 connect() 함수를 제공하여 우리의 컴포넌트를 store에 연결할 수 있도록 해줍니다.

connect는 HOC(Higher-Order Component) 패턴이라고 하며 HOC란 컴포넌트를 특정 함수로 감싸서 특정 값 또는 함수를 props로 받아와서 사용할 수 있게 해주는 패턴입니다. 

import { connect } from 'react-redux'
import { increment, decrement, reset } from './actionCreators'

// const Counter = ...

const mapStateToProps = (state /*, ownProps*/) => {
  return {
    counter: state.counter,
  }
}

const mapDispatchToProps = { increment, decrement, reset }

export default connect(mapStateToProps, mapDispatchToProps)(Counter)

connect의 인수로는 mapStateToProps과 mapDispatchToProps를 받습니다.

mapStateToProps는 컴포넌트에 props로 넣어줄 리덕스 스토어의 상태에 관련된 함수이고

mapDispatchToProps는 컴포넌트에 props로 넣어줄 액션을 디스패치 함수에 관련된 함수입니다.

 

참조 및 출처

react-redux.js.org/7.1/introduction/quick-start

Quick Start | React Redux