redux

reducer action store
redux-logger from redux
로그 찍히는걸 알수있음

connect로
mapStateToProps, mapdispatchToProps 연결해주는건 옛날 방식.

export default connect(mapStateToProps, mapdispatchToProps)(Subscribers);

useSelector, useDispatch를 사용할 수 있다.

아래는 connect를 해을 때의 코드

import React from "react";
import { connect } from "react-redux";
import { addSubscriber } from "../redux";

const Subscribers = ({ count, addSubscriber }) => {
  return (
    <div className="items">
      <p>구독자 수: {count}</p>
      <button onClick={() => addSubscriber()}>구독하기!</button>
    </div>
  );
};

const mapStateToProps = ({ subscribers }) => {
  return {
    count: subscribers.count,
  };
};
const mapdispatchToProps = {
  addSubscriber,
};

export default connect(mapStateToProps, mapdispatchToProps)(Subscribers);

아래는 connect 안쓰고 useSelector, useDispatch 사용했을 때의 코드
useSelector, useDispatch를 쓰면 아주 코드가 짧아지고 직관적임

import React from "react";
import { addSubscriber } from "../redux";
import { useSelector, useDispatch } from "react-redux";

const Subscribers = () => {
  // 인자가 필요없어짐
  let count = useSelector((state) => state.subscribers.count);
  let dispatch = useDispatch();


  return (
    <div className="items">
      <p>구독자 수: {count}</p>
      <button onClick={() => dispatch(addSubscriber())}>구독하기!</button>
    </div>
  );
};

export default Subscribers;