다시 액세스:useReducer

주 정부의 최신 상황
이 시리즈에서, 우리가 만든 모든 코드 세션과 샌드박스는 useState 를 사용하여 구성 요소 데이터를 관리합니다.그러나 React는 데이터 저장에 사용할 추가 갈고리를 제공했다. useReduceruseState는 단일 값을 저장하고 설정할 수 있지만 useReducer는 관련 값을 동시에 저장하고 조작하여 더욱 복잡하거나 구조화된 데이터를 처리하는 데 도움을 준다.

사용자 교육기의 해부useState와 유사하게 useReducer는 두 개의 값을 포함하는 그룹을 되돌려줍니다.

현재 상태

상태 업데이트에 사용되는 함수

const [value, setValue] = useState(null)

const [state, dispatch] = useReducer(reducer, initialState)

useReducer 갈고리는 최대 세 개의 매개 변수를 포함한다.

Reducer 함수 - 이 함수는 스케줄링된 작업에 따라 업데이트 상태를 설명합니다.

초기 상태 - 이 값은 갈고리의 초기 상태를 정의하는데 그 작업 원리는 우리가 실례화useState 갈고리를 제공할 때 기본값을 제공하는 방식과 유사하다.

초기화 함수 - 이 매개 변수는 선택할 수 있습니다. 맞습니다.

...calculating the initial state outside the reducer. This is also handy for resetting the state later in response to an action. ~ React docs

사용 상태와의 차이useReducer와 useState가 각각 상태치를 어떻게 갱신하는지 더 잘 설명하기 위해 나란히 살펴보자.다음 코드 세그먼트는 두 개의 훅을 사용하여 상태 값을 인스턴스화하고 업데이트하는 데 필요한 코드를 보여 줍니다.

// useState
const [name, setName] = useState("")
setName("Ryan")
console.log(name) // 'Ryan'

// useReducer
const initialState = {
  name: "",
}

function reducer(state, action) {
  switch (action.type) {
    case "update-name":
      return {
        name: action.value,
      }
  }
}

const [state, dispatch] = useReducer(reducer, initialState)
dispatch({ type: "update-name", value: "Ryan" })
console.log(state.name) // 'Ryan'

여기서 첫 번째 차이점은 useState가 문자열을 저장할 때useReducer의 초기 값이 대상이라는 것이다.이 경우 키가 하나뿐입니다(즉, name. 그러나 UI를 구축할 때 우리는 항상 상태에 더 많은 키를 추가할 수 있습니다.
그 다음에 useState의setter 함수는 그 값을 직접 업데이트하고 useReducer는 동작을 보냅니다.그리고 Reducer 함수는 어떤 종류의 조작을 촉발했는지, 그리고 그 상태를 어떻게 업데이트하는지 확인합니다.
주의: 만약 과거에 그것을 사용한 적이 없다면, 이것이 바로 Redux의 작업 원리입니다.

실상
아래의 모래상자에서 나는 데이트를 계획하는 표를 세웠다.여러 종류의 입력이 있지만 모든 값은 같은 입력에 있기 때문이다<form>.
우리는 모든 입력 값을 자신의 useState 갈고리에 저장하지 않고 폼의 모든 값을 단일useReducer로 저장하고 관리할 수 있다.이 예에서, 그 상태는 여러 개의 키를 가진 대상이며, 키마다 우리가 저장할 다른 값을 대표한다.개인적으로 말하자면, 이것은 this.state 우리가 연결되기 전의 class 구성 요소를 생각나게 한다.App.js에서 초기 상태에 대한 정의는 다음과 같습니다.

const blankForm = {
  name: "",
  email: "",
  date: "",
  time: "",
  feeling: "3",
}

const [formState, dispatch] = useReducer(reducer, blankForm)

blankForm 객체의 각 필드는 양식에 입력된 값을 표시하고 저장합니다.email의 초기 상태가 빈 문자열이기 때문에 렌더링할 때 useReducer의 상태에서 값을 읽을 때 전자 메일 입력이 비어 있습니다.

<input
  className="Form__input"
  name="email"
  type="email"
  value={formState.email}
/>

이를 실현하기 위해 우리는 입력 onChange 처리 프로그램을 설정하여 특정한 조작을 나누어 업데이트 상태를 만들었다.다음은 이메일 입력의 현재 모습입니다.

<input
  className="Form__input"
  name="email"
  type="email"
  value={formState.email}
  onChange={event => {
    dispatch({ type: "setEmail", value: event.target.value })
  }}
/>

위의 코드 세션에서 우리는 전문적으로 setEmail 조작을 분배한다.우리의 Reducer 함수에서 switch 문장은 case와 일치하는 action.type를 찾고 그 논리를 실행하여 상태를 업데이트합니다.

function reducer(state, action) {
  switch (action.type) {
    case "setName":
      return {
        ...state,
        name: action.value,
      }
    case "setEmail":
      return {
        ...state,
        email: action.value,
      }
    case "setDate":
      return {
        ...state,
        date: action.value,
      }
    case "setTime":
      return {
        ...state,
        time: action.value,
      }
    case "setFeeling":
      return {
        ...state,
        feeling: action.value,
      }
    case "reset":
      return blankForm
  }
}

예를 들어 setEmail를 호출할 때 Reducer는 현재 상태 정보를 포함하는 새로운 대상을 되돌려주지만 email 필드도 업데이트합니다.

return {
  ...state,
  email: action.value,
}

마지막으로 useReducer 갈고리의 상태가 업데이트되었기 때문에 구성 요소는 다시 렌더링되고 <input /> 모두 formState에서 업데이트된 값을 표시합니다.

성능에 대한 설명
내 친구Josef Aidt가 본문의 초기 초고를 검토할 때 지적한 바와 같이 우리는 상술한 모래상자 중useReducer의 용례에 어느 정도 성능 영향을 미친다.입력한 값이 변경될 때마다 입력한 함수onChange가 터치되기 때문에 우리는 실제적으로 키를 눌렀을 때마다 구성 요소를 다시 렌더링합니다.이것은 프레젠테이션 목적으로 가능하지만, 생산 응용 프로그램을 구축할 때 주의해야 한다.
이러한 상황을 피할 수 있는 두 가지 방법이 있다.

입력마다 떨림 제거를 추가하면 버튼마다 상태 업데이트를 터치하지 않습니다.

입력 값을 refs에 저장하지 않고 useReducer 저장합니다. 변경ref의 값은 구성 요소를 다시 렌더링하지 않기 때문입니다. (자세한 정보는 저의useRef 글을 참조하십시오).

지금 공연하러 가자!