useReducer

2020.06.12 까지 아는 지식으론...

• redux 에 reducer가 있다..
• reducer 는 현재 상태, 그리고 업데이트를 위해 정보를 담은 액션(Action)의 값을 전달 받아 새로운 상태를 반환하는 함수이다.

useState로 상태관리를 할 수 있는데 왜 reducer를 써야하는가?

• 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낼수 있다는것 !
  더 있겟지만 Redux 를 더 배우고 나서 다시 작성해야 겠다...
  😅

  Reducer 는 imutable (불변성)을 지켜줘야 한다.

counter code:

import React, { useReducer } from "react"

function reducer(state, action) {
  //action type에 따라 작업 수행
  switch (action.type) {
    case "INCREMENT":
      return { value: state.value + 1 }
    case "DECREMENT":
      return { value: state.value - 1 }
    default:
      //기존 상태 값 반환
      return state
  }
}

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, { value: 0 })
  return (
    <div>
      <p>
        The counter is <strong>{state.value}</strong>
      </p>
      <button onClick={() => dispatch({ type: "INCREMENT" })}> +1 </button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}> -1 </button>
    </div>
  )
}

export default Counter

해설: reducer로 state과 action을 지정한다.
switch case로 action type (실행할 액션을 저장한다)
증가, 하락 ,기본값

간단한 info 예시:

import React, { useReducer } from "react"
import useInputs from "../hooks/useInput"

function reducer(state, action) {
  return {
    ...state,
    [action.name]: action.value,
  }
}

const Info = () => {
  
const [state, dispatch] = useReducer(reducer, { name: "", nickname: "" })
  const { name, nickname } = state
  const onChange = (e) => {
     dispatch(e.target)
  }

  return (
    <div>
      <div>
        <input name="name" value={name} onChange={onChange} placeholder="Name" />
        <input name="nickname" value={nickname} onChange={onChange} placeholder="Nickname" />
      </div>
      <div>
        <li>
          <strong>name:</strong>
          {name}
        </li>
        <li>
          <strong>nickname:</strong>
          {nickname}
        </li>
      </div>
    </div>
  )
}

export default Info

해설: reducer로 state과 action을 지정한다.
현재의 상태를 가져온다 , 값이 두개 (name,nickname)이기 때문에 spread ... 을 사용하여 가져온다.
각 input에 값을 저장해야 하니까 [action.name]:action.value 를 작성한다.
=> 이건 [e.target.name]:e.target.value 랑 같은 개념

Redux 공부 열심히 하자...😅