#2 Redux

...李徳士の2回目の授業の個人概念.
前回の簡単な紹介
Reduxのstoreは、グローバル管理ステータスを許可します.でも、
store操作ステータスに直接アクセスすることはできません.reduceでステータスを変更できます.
これはstoreが読み取り専用であるため、reduceを使用してステータスを変更してもステータスは変更され、storeのステータスを1つ絞るだけでステータス値を変更するのではありません.
すなわちactionはdispatchによって発生し,reduceに移行するとstoreは状態更新を反映する.

connect (HOC)

HOC?
構成部品を特定の関数にラップして、特定の値または関数をpropsとして使用可能なアレイにします.
以上の定義は、ベロフォード氏のブログを参照しています.

mapStateToProps

コメントではstoreのステータスを受信するとpropsとして定義します.

mapDispatchToProps

Commentで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

userSelector、userDispatchはreact-reduxから提供されています
Hookは、この2つの方法を使えば、上記のように複雑に書くことはありません.
上の内容を直してください.
使い方をはっきりさせてから書きます.