[KDT]FCFE - 9주4일 React-Redux

Keunyeong Lee·2022년 1월 20일
0
post-thumbnail

Redux

Redux Practice

Use Redux Data

  • react에서 redux store를 사용할 수 있게 하고
  • 사용할 컴포넌트에서 react-redux의 useSelector hook을 사용하여 data를 읽어올 수 있다.
import classes from "./Counter.module.css";
import { useSelector } from "react-redux";

const Counter = () => {
  const counter = useSelector((state) => state.counter);
  const toggleCounterHandler = () => {};

  return (
    <main className={classes.counter}>
      <h1>Redux Counter</h1>
      <div className={classes.value}>{counter}</div>
      <button onClick={toggleCounterHandler}>Toggle Counter</button>
    </main>
  );
};

export default Counter;
  • useSelector hook 을 이용해 읽어오면 해당 컴포넌트를 react-redux 가 자동으로 store에 구독을 설정한다.

  • 구독 되어 있는 컴포넌트는 읽어오는 정보가 업데이트 되면 컴포넌트를 업데이트 하며 가장 최신의 data를 받아 컴포넌트에 반영한다. ( 즉, 리덕스 스토어에 data가 바뀔때마다 )

  • useSelector 를 통해 data를 가져오면 해당 컴포넌트의 data는 항상 최신을 유지하게 된다.

  • 구독중인 컴포넌트가 unmount 된다면 react-redux가 자동으로 구독을 clear 해 준다.

Action 을 Dispatch 하기

  • reducer에 action을 설정해 놓고 필요한 action을 dispatch 를 통해 reducer로 넘겨준다.

  • react-redux의 useDispatch hook 을 사용하여 dispatch 할 수 있다.

import classes from "./Counter.module.css";
import { useSelector, useDispatch } from "react-redux";

const Counter = () => {
  const counter = useSelector((state) => state.counter);
  const dispatch = useDispatch();
  const incrementHandler = ()=>{
    dispatch({type : 'increment'});
  }
  const increaseHandler = ()=>{
    dispatch({type : 'increase', amount: 5});
  }
  const decrementHandler = ()=>{
    dispatch({type : 'decrement'});
  }
  const toggleCounterHandler = () => {};

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

export default Counter;
  • class형태로 작성해서 dispatch 하기
import classes from "./Counter.module.css";
import { Component } from "react";
import { connect } from "react-redux";

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)}>Descrement</button>
        </div>
        <button onClick={this.toggleCounterHandler}>Toggle Counter</button>
      </main>
  	);
  }
}

const mapStateToProps = state => {
  return {
    counter : state.counter
  };
}

const mapDispatchToProps = dispatch =>{
  return {
    increment: ()=> dispatch({type: 'increment'}),
    decrement: ()=> dispatch({type: 'decrement'}),
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter)
profile
🏃🏽 동적인 개발자

0개의 댓글