reducer는 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수이다.
function reducer(state,action){
//새로운 상태를 만드는 로직
//const nextState
return nextState;
}
nextState : reducer에서 반환하는 상태는 곧 컴포넌트가 지닐 새로운상태
action : 업데이트를 위한 한 정보를 가지고 있음
주로 type 값을 지닌 객체 형태로 사용하지만, 꼭 따라야할 규칙은 없음
예시
//카운터에 1을 더하는 액션
{
type:"INCREMENT"
}
//카운터에 1을 뺴는 액션
{
type:"DECRREMENT"
}
//input 값을 바꾸는 액션
{
type:"CHANGE_INPUT",
key:"email",
value:"tester@react.com"
}
//새 할 일을 등록하는 액션
{
type:"ADD_TODO",
todo:{
id:1,
text:"useReducer 배우기",
done:false,
}
}
const [state, dispatch] = useReducer(reducer,initialState);
state : 앞으로 컴포넌트에서 사용 할 수 있는 상태
dispatch : 액션을 발생시키는 함수
useReducer에 첫번째 파라미터는 reducer함수, 두번째 파라미터는 초기상태
Example1 (useState) Counter.js
import React, {useState} from 'react';
function Counter(){
const [number, setNumber] = useState(0);
const onIncrease = () => {
setNumber(prevNumber => prevNumber + 1)
}
const onDecrease = () => {
setNumber(prevNumber => prevNumber -1)
}
return (
<div>
<h1>{number}</h1>
<button onClick={onIncrease}>+1</button>
<button onClick={onDecrease}>-1</button>
</div>
)
}
export defacult Counter;
Example2 (useReducer) Counter.js
import React,{useReducer} from "react"
function reducer(state,action){
switch(action.type){
case "INCREMENT":
return state + 1;
case "DECREMENT":
return state - 1;
default:
return state;
}
}
function Counter(){
const [number, dispatch] = useReducer(reducer,0);
const onIncrease = () => {
dispatch({type:"INCREMENT"});
}
const onDecrease = () => {
dispatch({type:"DECREMENT"});
}
return (
<div>
<h1>{number}</h1>
<button onClick={onIncrease}>+1</button>
<button onClick={onDecrease}>-1</button>
</div>
)
}
export default Counter;
useState
useReducer