[Epic React] useState에서 useReducer로

useState와 useReducer의 차이는 setState 대신 newState를 만드는 함수를 직접 정의할 수 있다는 것이다.

const [count,setCount] = useReducer(countReducer,0)

function countReducer(prevState,newState){
	return newState
}

const [count,setCount] = useState(0)

// 똑같이 동작한다
setCount(count+1)

어 그럼 지금까지 redux 만들면서 작업했던 switch - action 구문은 뭐에요?

-> 이전 상태(+타입)에 따라 다음 상태를 만드는 작업을 setState가 아닌 reducer함수에서 구현했을 뿐.

-> 리턴하는 것은 동일하게 다음 state다

reducer는 좁아지는 파이프처럼 하나의 케이스로 축소해줌.

 

위를 아래와 같이 바꾸면 dispatch처럼 된다.

function countReducer(state, action) {
  switch (action.type) {
    case 'INCREMENT': {
      return {count: state.count + action.step}
    }
    case 'DECREMENT': {
      return {count: state.count - action.step}
    }
    default:
      throw new Error(`Unsupported action type : ${action.type}`)
  }
}

function Counter({initialCount = 0, step = 1}) {
  // 🐨 replace React.useState with React.useReducer.
  // 💰 React.useReducer(countReducer, initialCount)
  const [{count}, dispatch] = React.useReducer(countReducer, {count: 0})

  // 💰 you can write the countReducer function so you don't have to make any
  // changes to the next two lines of code! Remember:
  // The 1st argument is called "state" - the current value of count
  // The 2nd argument is called "newState" - the value passed to setCount
  const increment = () => dispatch({type: 'INCREMENT', step})
  return <button onClick={increment}>{count}</button>
}