React 갈고리:useContext 및useReducer를 사용하여 상태 향상/전달

이 글은 나의 Blog에 발표되었다.
나는 이러한 상황에 부딪혔다. 나는 많은 하위 구성 요소와 형제 구성 요소가 그것들 사이에서 상태를 공유하려고 시도했다.이전에 나는 prop 방법을 사용하여 구성 요소 간에 업데이트 상태를 공유했다.한동안 아이템의 수가 늘어나서 싫어요.
그런 다음 context 기반 방법으로 상태를 글로벌 스토리지에 저장하고 여러 응용 프로그램에서 공유합니다.그러나 context API를 사용하더라도 render props 를 사용해야 전역 context 에서 스토리지 상태를 사용할 수 있습니다.당신의 구성 요소가 끼워 넣고, 유지할 수 없는, 돌이키기 어려운 구성 요소가 되었다는 것을 곧 깨닫게 될 것입니다.
현재 이 글은 Reacthooks의 최신 개념을 어떻게 활용하여 더욱 간결한 코드로 같은 기능을 실현하는지 토론하고 있다.
먼저 일부 하위 레벨 및 동급 구성 요소로 예제 UI를 구축합니다.

UI를 살펴보도록 하겠습니다.

CodeSandbox로 가서 신속하게 실험을 진행하다.React 코드 샌드박스를 만드십시오.index.js를 다음 부품으로 교체합니다.

import React from "react";
import ReactDOM from "react-dom";

function App() {
  return (
    <div className="App">
      <h1>Lift up / Pass down state</h1>

      <UserList />
      <AddGenderToUser />
      <AddAgeToUser />
    </div>
  );
}

function UserList() {
  return (
    <ul>
      <li>
        <span>Vimalraj Selvam</span>
        <button type="button">Edit</button>
      </li>

      <li>
        <span>Bhuvaneswari Vimalraj</span>
        <button type="button">Edit</button>
      </li>
    </ul>
  );
}

function AddGenderToUser({ username }) {
  return (
    <div>
      <h2>Add gender to {username}</h2>
      <button type="button">Add Age</button>
    </div>
  );
}

function AddAgeToUser({ username }) {
  return (
    <div>
      <h2>Add Age to {username}</h2>
      <button type="button">Submit</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

여기에는 상위 구성 요소 App 까지 세 개의 하위 구성 요소가 있습니다: UserList, AddGenderToUser, AddAgeToUser.
이것은 매우 간단한 예다.따라서 이 프로그램의 용례를 너무 많이 고려하지 마세요.
특정 사용자의 AddGenderToUser 단추를 눌렀을 때 Edit 구성 요소를 표시하고 선택한 사용자 이름으로 구성 요소의 제목을 업데이트하고 싶습니다.AddAgeToUser 구성 요소에서 Add Age 버튼을 클릭하면 AddGenderToUser 구성 요소도 마찬가지입니다.
우선, 사용자를 선택하지 않았을 때 프로그램의 초기 상태를 만듭니다.

const initialState = {
  username: null,
  gender: null,
  age: null
};

그리고 Reducer 방법을 만들어서 다른 작업을 수행합니다.내가 생각할 수 있는 행동은 다음과 같다.

사용자 업데이트

현재 사용자의 성별 설정

현재 사용자의 연령 설정

함수 reducer 에 넣습니다.

const UPDATE_USER = "UPDATE_USER";
const SET_GENDER = "SET_GENDER";
const SET_AGE = "SET_AGE";

function reducer(state, action) {
  switch (action.type) {
    case UPDATE_USER:
      return {
        username: action.username,
        gender: null,
        age: null
      };
    case SET_GENDER:
      return {
        username: state.username,
        gender: action.gender,
        age: null
      };
    case SET_AGE:
      return {
        username: state.username,
        gender: state.gender,
        age: action.age
      };
    default:
      return initialState;
  }
}

우리의 감속기 방법은 매우 간단하다.이것은 action 매개 변수에서 값을 가져와 현재 상태로 설정합니다.
현재,react의 App 갈고리를 사용하여 부모 useReducer 구성 요소에서 이reducer 함수를 사용합니다.따라서 우리는 context를 통해 감속기의 속성을 사용할 수 있다.return 구성 요소의 App 문장 앞에 다음 줄을 추가합니다.

const [user, dispatch] = React.useReducer(reducer, initialState);

여기user는 현재 상태이고 dispatch는 우리가 감속기에 정의된 각종 동작을 촉발하는 방법이다.이를 위해 dispatch 방법을 다음 줄에 전달해야 하며, state 대상에 업데이트가 발생하면 부모 대상/부모 대상의 다른 하위 대상도 알아야 한다.
상기 목표를 실현하기 위해서, 우리는react의context API를 이용하여 우리의 상태와 스케줄링을 저장해야 한다.
아래 줄로 초기화 context 합시다.이 줄은 App 함수 이전에 있어야 한다.

const MyContext = React.createContext(null);

나는 이미 null로 상하문을 초기화했다.우리는 우리의 상태와 스케줄링을 상하문에 두어야 한다.이를 위해 Appprovider로 모든 하위 구성 요소를 편집합니다 context's.업데이트된 App 구성 요소는 다음과 같습니다.

<MyContext.Provider value={{ user, dispatch }}>
  <UserList />
  {user.username && <AddGenderToUser />}
  {user.gender && <AddAgeToUser />}
</MyContext.Provider>

좋습니다. 현재 우리는 user 상태와 상응하는 dispatch 방법을 방문할 수 있습니다.그 밖에 user 상태 속성username & gender을 바탕으로 하는 소수자 원소의 조건을 추가했습니다.
특정 사용자에게 UserList 단추를 눌렀을 때 UPDATE_USER 동작을 터치할 수 있도록 Edit 구성 요소를 업데이트합니다.이를 위해서는 React의 dispatch 갈고리를 context 에서 useContext 방법으로 얻어야 합니다.
다시 쓰기UserList 구성 요소:

function UserList() {
  const { dispatch } = useContext(MyContext);
  return (
    <ul>
      <li>
        <span>Vimalraj Selvam</span>
        <button
          type="button"
          onClick={() => dispatch({ type: UPDATE_USER, username: "Vimalraj" })}
        >
          Edit
        </button>
      </li>

      {/* Removed for brevity */}
    </ul>
  );
}

우리는 UPDATE_USER 작업을 스케줄링하고 username 상태를 업데이트하는 속성을 보내고 있습니다.현재 특정 사용자를 위해 Edit 단추를 누르면 AddGenderToUser 구성 요소가 나타납니다.그러나 우리는 여전히 나타나는 구성 요소에서 사용자 이름을 보지 못했다.복구합시다!

function AddGenderToUser() {
  const { user, dispatch } = useContext(MyContext);

  return (
    <div>
      <h2>Add gender to {user.username}</h2>
      <button
        type="button"
        onClick={() => dispatch({ type: SET_GENDER, gender: "??" })}
      >
        Add Age
      </button>
    </div>
  );
}

우리는 현재 user 상태와 dispatch 방법을 얻었다.제목에 표시할 속성username을 추출하고 SET_GENDER 단추를 눌렀을 때 Add Age 동작을 터치합니다.
또한 AddAgeToUser 함수에 대해 동일한 작업을 반복할 수 있습니다.
전체 버전은 코드 샌드박스에서 얻을 수 있습니다. 언제든지 이곳에서 보십시오.

코드 샌드박스에서 나는 나이 업데이트 후에 세부 사항을 표시하기 위해 구성 요소를 약간 업데이트했다.
만약 이 게시물이 당신에게 도움이 된다면, 좋아요를 누르고 공유하세요.