요약 React-Redux의 connect() 함수

이번에는 지금 공부하고 있는 React-Redux에서 사용하는connect 함수를 쓰고 싶습니다.

そもそもReduxとは何か？

React에서 각 구성 요소를 통해state를 관리합니다.
Redux는 리액트와 다른 곳에서 store라는 곳에서 이 state를 일괄적으로 관리할 수 있는 장서의 이름을 말한다.

connect関数とは？

위에서 말한 바와 같이 state를 통일적으로 관리하는 Redux의store는React와 다른 곳에 있기 때문에Component와store를 연결해야 하기 때문에connect 함수를 사용한다.

具体的なconnect関数の役割

store에서component에 필요한state를 가져옵니다.

store의state

실제 관찰 문법은 다음과 같다.

connect(mapStateToProps,mapDispatchToProps)(component)

mapStateToProps
state를 가져오는 함수입니다.connect 함수에 전달되는 첫 번째 인자입니다.

mapDispatchToProps
state를 다시 쓰는 함수입니다.
connect 함수에 전달되는 두 번째 인자입니다.

maptateToops의 예

const mapStateToProps = state => ({
  count: state.value
})

이 때 대상 {count:state.value}은store의state이며component를 통해 얻을 수 있습니다.component에서this입니다.props.count 형식으로props에서state까지의 값을 참조할 수 있습니다.

const mapDispatchToProps = dispatch => ({
  increment: () => dispatch(increment())
})

dispatch()에 액션을 건네주는 파라미터를 통해 Reducter에서state를 변경할 수 있습니다.이런 상황에서 액션은 액션 자체가 아니라 액션크리에이터에 액션크리에이터를 발행한다.
action 및 actionCreator

const increment = () => ({
  type: "INCREMENT"
})

action은 {type: "INCREMENT"}이고 대상입니다.
actionCreator는 increant () 이고 action을 되돌려주는 함수입니다.
maptateToops와 같이 component에서this입니다.props.increament () 형식으로 디스패치를 진행하고 type에 대한state 변경 처리는 Reducter에서 진행합니다.
component의 전체적인 이미지는 이렇다.

class App extends Component {
  render() {
    const {
      handleIncrement,
      handleDecrement,
      value
    } = this.props;
    return (
      <div className="Count">
        <div>value: {value}</div>
        <button onClick={handleIncrement}>+1</button>
        <button onClick={handleDecrement}>-1</button>
      </div>
    );
  }
}
const mapStateToProps = (state) => {
  return { value: state.count.value };　
};
const mapDispatchToProps = (dispatch) => {
  return {
    handleIncrement: () => dispatch(increment()),
    handleDecrement: () => dispatch(decrement())
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(App);

이상은 상당히 간단하지만 동시에 자신이 공부한 성과이기도 하기 때문에 총괄해 봤다.
만약 잘못된 해석이 있다면 반드시 메시지를 남겨 주세요.
조금이라도 도움이 됐으면 좋겠어요.