React 연결 및 컨텍스트 API 공유 상태 사용

React 16.8은 다른 강력한 기능과 함께 기능 구성 요소에 상태를 제공합니다!

In my article Managing State with React Hooks I go over how to use the hooks useState and useReducer to manage state within function components. Give this a read if you need a refresher on how hooks can help manage state.

본고에서 우리는 연결과ReactContext API를 사용하여 함수 구성 요소 간의 공유 상태를 제공하는 방법을 연구할 것이다!

컨텍스트 작성 및 제공

컨텍스트 API 자체는 갈고리의 일부는 아니지만 useReducer 및 useContext 갈고리와 함께 사용하면 응용 프로그램의 전역 (또는 특정 구성 요소 트리, 사용자가 어떻게 실현하느냐에 따라 다름) 에서 축소기와 상태를 제공할 수 있습니다.

Not familiar with React’s Context API? Check out their documentation explaining what a Context is and what it can accomplish.

이것은 어떻게 일을 하는지 간단한 예를 보여 봅시다!
우선, 우리는 전체 응용 프로그램에 감속기 state 와 dispatch function 를 제공하는 상하문을 만들 것이다.이렇게 하면 전체 응용 프로그램은 감속기와 상태에 접근하는 방법을 제공할 것이다.

import React, { createContext, useReducer } from 'react'

export const StateContext = createContext()

하위 레벨에 컨텍스트 값을 제공하는 어셈블리 만들기

네, 최종적으로 state 및 dispatch 을 포함하는 상하문을 만들었습니다.우리는 어떻게 그것을 전체 응용 프로그램에 제공합니까?우리는 전체 응용 프로그램을 상하문에서 받은 Provider 에 포장해야 한다.응용 프로그램을 붙여넣고 상하문 값 (상태 및 스케줄러) 을 하위 대상에 제공할 수 있는 패키지를 만듭니다.

import React, { createContext, useReducer } from 'react'

export const StateContext = createContext()

// This is a component that wraps all of its children in the Provider
export const StateProvider = ({ reducer, initialState, children }) => (
  <StateContext.Provider value={useReducer(reducer, initialState)}>
    { children }
  </StateContext.Provider>
)

위의 코드는 다음과 같은 작업을 수행하고 있습니다.

감속기, 초기 상태, 하위 대상을 도구로 포함하는 StateProvider 라는 새 구성 요소를 내보냅니다.StateProvider 구성 요소는 우리가 만든 StateContext에서 모든 하위 구성 요소를 봉인합니다.

우리는 감속기와 초기 상태를 이 부품의 기둥에서 Provider 연결로 전달할 것이다.

제공자는 useReducer라는 아이템을 받는다.이 값은 모든 value 에 대한 데이터입니다.children 갈고리는 두 항목을 포함하는 그룹을 되돌려줍니다. 현재 상태와 스케줄링 함수입니다.이것은 우리가 useReducer 속성에 전달한 값이며, 이 값을 value 의 모든 서브어셈블리에 제공합니다.

StateProvider 구성 요소에 전체 응용 프로그램 포장

경탄했어우리는 현재 모든 하위 대상을 공급자에 봉인하는 구성 요소가 있습니다. 이 공급자는 그것들에게 StateProvider 및 state 을 제공합니다. 우리는 그것들이 전체 응용 프로그램에서 공유 상태를 필요로 합니다.아이들이 제공하는 상하문을 사용할 수 있도록 이 구성 요소에 프로그램을 포장합시다.

import React from 'react';
import { StateProvider } from './State'

function StateApp() {
  // Initialize the state
  const initialState = {
    points: 0
  }

  // Defines how to update the state based on actions
  const reducer = (state, action) => {
    switch (action.type) {
        case 'add':
            return { ...state, points: state.points + 1 }
        default:
            return state;
    }
  };

  return (
    <StateProvider initialState={initialState} reducer={reducer}>
        // Application
    </StateProvider>
  )
}

export default StateApp

이 상태를 관리하기 위해 초기 상태와 Reducer를 만듭니다.그리고 우리는 응용 프로그램을 dispatch 구성 요소에 포장하여 전송 StateProvider 과 initialState 한다.위에서 보듯이 reducer 이를 사용하여 모든 어린이에게 StateProvider과state를 제공한다.결과는 전 세계 진출국!

서브어셈블리의 컨텍스트 작업

이제 서브어셈블리가 글로벌 상태에 어떻게 접근하고 업데이트하는지 봅시다!

In the past, if you wanted to access a Context you would need to wrap your component in that Context’s Consumer. Using the new useContext hook allows us to access the context without using the Consumer.

import React, { useContext } from 'react'
import { StateContext } from '../State'

function Points() {
  // Here, we get the state and dispatch from the context
  const [{ points }, dispatch] = useContext( StateContext )

  return (
    <>
        {/* Clicking this button runs the global dispatch we got from the Context */}
        <button onClick={() => dispatch({type: 'add'})}>Add</button>
        <p>{ points }</p>
    </>
  );
}

export default Points

전역 상태에 접근하기 위해서는 갈고리와 우리가 만든 dispatch 을 가져와야 합니다.
우리는 useContext 갈고리를 사용하여 상하문에서 제공한 데이터에 접근한다.이 갈고리는 매개 변수와 상하문을 받아들여 현재의 상하문 값을 되돌려줍니다.우리의 예에서 상하문 값은 StateContext 함수의 반환값으로 이 함수는 두 항목의 수조를 포함한다.첫 번째는 현재 상태이고, 두 번째는 스케줄링 함수입니다.

NOTE : I am using Destructuring to pull out only the points key from the state and to pull the items out of the array.

Add 버튼을 클릭하면 컨텍스트에서 제공하는 전역 useContext 이 발생하여 전역 상태의 키 값이 증가합니다.
깔끔했어이 구성 요소는 현재 useReducer 구성 요소의 구성 요소 트리에 있는 다른 구성 요소와 공유할 수 있는 전역 상태를 사용하고 업데이트하고 있습니다.

그것들을 한데 모으다

다음은 이 모든 작업의 완전한 예이다.다음은 dispatch 파일입니다. 이 파일은 points 에서 하위 파일을 포장합니다.

import React from 'react';
import { StateProvider } from './contexts/State'
import GlobalStateCounter from './components/GlobalStateCounter'
import './App.scss'

function App() {
  // Initialize the state
  const initialState = {
    points: 0
  }

  // Defines how to update the state based on actions
  const reducer = (state, action) => {
    switch (action.type) {
        case 'add':
            return { ...state, points: state.points + 1 }
        case 'subtract':
            return { ...state, points: state.points - 1 }
        case 'reset':
            return { ...state, points: 0 }
        default:
            return state;
    }
  };

  return (
    <div className="App">
      <StateProvider initialState={initialState} reducer={reducer}>
          {
              // Creates two instances of the component so we can see both update when state changes
              [...Array(2)].map((e, i) => <GlobalStateCounter index={i + 1}/> )
          }
      </StateProvider>
    </div>
  )
}

export default App

이것은 StateProvider 갈고리 접근 App.js 값을 사용하는 서브어셈블리로 StateProvider 과 useContext 함수를 포함하는 수조이다.

import React, { useContext } from 'react'
import { StateContext } from '../State'
import '../assets/scss/Points.scss'

function Points({index}) {

  const [{ points }, dispatch] = useContext( StateContext )

  return (
    <div id="Points">
      <p className="title">Points (globalState {index})</p>
      <hr className="divider"/>
      <div className="pointsContainer">
          <div className="buttons">
            {/* These buttons use the dispatch to update the state */}
            <button className="button add" onClick={() => dispatch({type: 'add'})}>Add</button>
            <button className="button subtract" onClick={() => dispatch({type: 'subtract'})}>Subtract</button>
            <button className="button reset" onClick={() => dispatch({type: 'reset'})}>Reset</button>
          </div>
          <div className="outputBox">
            {/* Output the points variable */}
            <p>{ points }</p>
          </div>
      </div>
    </div>
  );
}

export default Points

React의 컨텍스트 API 및 연결을 사용하여 글로벌 상태 관리를 구현했습니다!이것은 기본적인 예이지만 더욱 복잡하고 조직적인 상태 관리 시스템에 튼튼한 기초를 다졌다.

결론

이 구조를 사용하면 전체 응용 프로그램에서 전역 상태에 대한 접근을 제공할 수 있습니다!이것은 다른 형식의 상태 관리를 대체할 수 있다. 예를 들어 StateContext.더 많은 복잡성을 증가시키고 통용성과 조직성을 가지게 할 수 있지만 전체적인 사고방식은 관리 기능 구성 요소의 공유 상태를 시작하는 데 좋은 기초를 제공했다!
읽어주셔서 감사합니다!