#2 Redux

개인적으로 개념을 다지기 위한 리덕스 두번째 시간

이전 시간의 짧은 소개

Redux의 store로 전역으로 상태를 관리를 할 수 있다. 하지만,
store에 바로 접근하여 상태를 조작은 할 수 없고, reducer를 통해서 상태를 변경이 가능하다.
그 이유는 store는 읽기전용이기 때문이며, reducer로 상태를 변경하는 것 또한 상태를 갈아치우는거지 store의 상태를 딱 하나를 꼬집어 상태값을 변경하는게 아니다.

즉, action은 dispatch를 통해서 발생시키고, reducer로 넘어간 후 store에 상태 업데이트가 반영된다.

connect (HOC)

HOC?
컴포넌트를 특정 함수로 감싸서 특정 값 또는 함수를 props로 받아와서 사용 할 수 있게 해주는 패턴입니다.

위 정의는 벨로퍼트님의 블로그에서 참고하였습니다.

mapStateToProps

commponent에서는 store에 있는 상태를 받아올 경우에는 props로 정의를 한다.

mapDispatchToProps

commponent에서는 action을 발생시키는 dispath를 사용할 경우에는 props로 정의를 한다.

사용방법

import React from 'react';
import { connect } from 'react-redux';

// action(함수)을 불러온다.
import { addSubscriber } from '../actions';

// 아래 map을 통해서 얻은 props를 넣어주고 사용하자.
const Subscriber = ({ count, addSubscriber }) => {
  return (
    <div className="items">
      <p>구독자 수 : {count}</p>
      <button onClick={() => addSubscriber()}>구독하기</button>
    </div>
  );
};

// state 정의
// 파라미터는 필요한 정보를 구조분해하여 가져오자.
const mapStateToProps = ({ subscriber }) => {
  return {
    count: subscriber.count, // props로 전달된다.
  };
};

// dispatch 정의(객체로 넘기는 방법)
const mapDispatchToProps = {
  // addSubscriber = addSubscriber();
  addSubscriber,
};

// connect로 위 두개의 map를 감싸준다.
export default connect(mapStateToProps, mapDispatchToProps)(Subscriber);

하지만 이제 connect를 사용할 일은 극히 줄었다고 하며,
그 이유는 더 편한 도구가 있기 때문이다.

useSelecetor / useDispatch

useSelector, useDispatch는 react-redux에서 제공되는
Hook이며, 이 두가지를 사용하면 위 처럼 복잡하게 작성할 일은 없다.
위 내용을 한번 변경해보자.

사용방법은 정확히 알아본 뒤 작성해보자.