정말 쉽게 Dispatch & states 를 Redux Hooks 사용하기

드디어 React-Redux 버전 7.1(배포일 2019/6/11)이 정식 배포 되었습니다. 사실 리덕스 문서를 보러 들어갔다가 알게된 사실입니다. 에헴....

이제 connect함수를 사용하지 않고도 각각의 dispatch,state를 쉽게 사용가능해졌습니다.
어떻게 써야하는지 간단한 예제로 시작해보겠습니다.

Action, Reducer 는 생략 하겠습니다.

예제

기존방식

import React from "react";
import { connect } from 'react-redux'
import { incrementAction, decrementAction } from "./Actions";

const counterSelector = state => state.counter;

const CounterComponents = props => {
  return (
    <>
      <p> count: {props.counter} </p>
      <button onClick={props.increment}>increment</button>
      <button onClick={props.decrement}>decrement</button>
    </>
  );
};

const mapStateToProps = state => ({
  counter: counterSelector(state)
});

const mapDispatchToProps = dispatch => ({
  increment: () => dispatch(incrementAction()),
  decrement: () => dispatch(decrementAction())
});

const Counter = connect(
  mapStateToProps,
  mapDispatchToProps
)(CounterComponents);

Hook을 사용하는 방식

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { incrementAction, decrementAction } from "./Actions";

const counterSelector = state => state.counter;

const Counter = props => {
  // You can get the dispatch attached to the store with useDispatch.
  const dispatch = useDispatch();

  // You can get the state of the store using useSelector
  const counter = useSelector(counterSelector);

  return (
    <>
      <p> count: {counter} </p>
      <button onClick={dispatch(incrementAction())}>increment</button>
      <button onClick={dispatch(decrementAction())}>decrement</button>
    </>
  );
};

어떠세요? 쉽게 바뀐걸 체감하실수 있으시겠어요?
제생각에는 기존방식으로 개발이 되어진 부분은 그대로 두고, 새로운 개발을 할때 적용해보고 싶은 생각이 드네요.

중요 사항

만약 mapStateToProps, useSelector 사용시 문제가 있다고 하네요.
특히, useSelector()를 사용하면 Usage Warning이 발생하게 됩니다.또한 각각 따로 dispatch를 실행하면 useSelector도 같이 실행이 되어집니다.
결론은 props를 최신 데이타로 보장하지 않는다고 합니다.

버전이 올라가면 버그가 수정이 될꺼라 생각합니다.