TIL - 12/29

Udemy [리액트 완벽 가이드]
#247 ~

---

[components > Counter.js]

import { useSelector, useDispatch} from "react-redux";

const Counter = () => {
  const dispatch = useDispatch();

  const counter = useSelector((state) => state.counter.counter);
  const show = useSelector((state) => state.counter.showCounter);

  const incrementHandler = () => {
 dispatch({ type: "increment" });
  };

  const increaseHandler = () => {
    dispatch({ type: "decrement" });
  };

  const decrementHandler = () => {
    dispatch(counterActions.decrement());
  };

  const toggleCounterHandler = () => {
    dispatch(counterActions.toggleCounter());
  };

  return (
    <main className={classes.counter}>
      <h1>Redux Counter</h1>
      {show && <div className={classes.value}>{counter}</div>}
      <div>
        <button onClick={incrementHandler}>Increment</button>
        <button onClick={increaseHandler}>Increase by 5</button>
        <button onClick={decrementHandler}>Decrement</button>
      </div>
      <button onClick={toggleCounterHandler}>Toggle Counter</button>
    </main>
  );
};

export default Counter;

• 스토어에 액션을 보내기 위해서 -> useDispatch
• 액션은 유형 속성이 있는 객체이므로 액션을 보내기 위해서 dispatch({ type: '' }) 의 형식으로 보내며 type의 값은 스토어에서 사용하는 식별자 중 하나

---

[components > Counter.js]

class Counter extends Component {
  incrementHandler() {
    this.props.increment();
  }
  decrementHandler() {
    this.props.decrement();
  }
  toggleCounterHandler() {}
  render() {
    return (
      <main className={classes.counter}>
        <h1>Redux Counter</h1>
        <div className={classes.value}>{this.props.counter}</div>
        <div>
          <button onClick={this.incrementHandler.bind(this)}>Increment</button>
          <button onClick={this.decrementHandler.bind(this)}>Decrement</button>
        </div>
        <button onClick={this.toggleCounterHandler}>Toggle Counter</button>
      </main>
    );
  }
}

//useSelector
//리덕스 스테이트를 받음 -> 객체를 리턴함 (키는 프롭으로 받은것, 값은 리덕스 상태에 들어가는 로직 )
const mapStateToProps = (state) => {
  return {
    counter: state.counter,
  };
};

//usedispatch와 같음, dispatch 함수를 프롭에 저장
const mapDispatchToProps = (dispatch) => {
  return {
    increment: () => dispatch({ type: "increment" }),
    decrement: () => dispatch({ type: "decrement" }),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

• 커넥트를 export -> 새 함수를 반환함 , 리턴함수에 counter 보냄
• 커넥트 함수를 실행 -> 새 함수를 리턴 -> 리턴을 실행 (counter을 여기에 보냄)
• 연결하기 위해서 실행할때 뭔가 보냄 -> 변수가 있어야 한다(2개 함수)
• 첫번째 = 리덕스 상태를 전달(prop) 받아서 맵한다 -> 컴포넌트에 받아질 것