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 해 준다.
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;
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)