React Context API 및 useReducer , 파트 2

자, 2부로! 우리는 React Context API를 사용하여 애플리케이션 전체에 값을 전달하는 방법을 다루었습니다.

2부에서는 애플리케이션 전체에서 상태를 유지하기 위해 useReducer 후크를 사용하는 방법을 살펴보겠습니다. 그리고 React Context API를 사용하여 해당 상태를 전체 애플리케이션에 전달합니다.

ProductsProvider 구성 요소에 useReducer를 추가하여 시작합니다.

//products_context.js

import React, {useReducer} from "react";
import reducer from "../products_reducer";

export const ProductsProvider = ({ children }) => {

const initialState = {
  productsLoading: false,
  products: [],
};

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

  return (
    <ProductContext.Provider value={}>
      {children}
    </ProductContext.Provider>
  );
};

useReducer 의 부분을 설명하기 위해 현재 상태인 state , type 을 받는 dispatch , type 은 reducer에게 어떤 조치를 취해야 하는지 알려주는 payload , 그리고 payload 는 reducer에 전달될 데이터입니다. reducer 는 함수입니다. 디스패치 유형에 따라 상태를 수정하는 방법을 결정하고 마지막으로 자체 설명이 가능한 initialState가 있습니다.

그것으로 감속기 기능을 정의합시다.

//products_reducer.js

const products_reducer = (state, action) => {
  if (action.type === "GET_PRODUCTS_BEGIN") {
    return { ...state, productsLoading: true };
  }

  if (action.type === "GET_PRODUCTS_SUCCESS") {
    return {
      ...state,
      productsLoading: false,
      products: action.payload,
    };
  }

 };

export default products_reducer;

우리의 리듀서 함수는 currentState와 action이라는 2개의 인자를 받습니다. 본질적으로 당신의 action은 dispatch입니다. 감속기는 작업 유형을 확인하고 작업 유형에 따라 업데이트된 상태를 반환합니다.

그렇다면 리듀서가 상태를 업데이트할 수 있도록 올바른 유형을 제공하기 위해 어떻게 디스패치를 ​​사용할 수 있을까요? products_context.js로 돌아가 useReducer를 정의한 ProductsProvider 함수로 갑시다.

//products_context.js

export const ProductsProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const fetchProducts = async () => {
   dispatch({ type: GET_PRODUCTS_BEGIN });
    let response = {};
    try {
      response = await axios.get(url);
      let products = response.data;
 dispatch({ type: GET_PRODUCTS_SUCCESS, payload: products })
    } catch (error) {
      console.log({ error });
    }
  };


  return (
    <ProductContext.Provider value={{ ...state , fetchProducts }}>
      {children}
    </ProductContext.Provider>
  );
};

우리의 fetchProducts 함수에서 우리는 우리의 상태를 수정하기 위해 디스패치 함수를 사용합니다. 두 번째 디스패치에서 API 호출의 응답을 페이로드로 디스패치에 전달합니다. 그러면 "GET_PRODUCTS_SUCCESS"유형의 감속기 함수에서 해당 페이로드 값이 사용됩니다.

마지막으로 우리는 상태를 ProductContext.Provider 의 값 소품으로 확산하므로 상태가 업데이트될 때마다 이 상태 값을 사용하는 구성 요소가 다시 렌더링됩니다.

//products_context.js
  <ProductContext.Provider value={{ ...state , fetchProducts }}>
      {children}
    </ProductContext.Provider>

여기 제품 표시 페이지에서 상태 값을 분해하고 그에 따라 데이터를 표시하는 데 사용할 수 있습니다.

//Product.js Page

import { useProductContext } from "../products_context";

const { products , productsLoading , fetchProducts } = useProductContext();

이것으로 React Context API 및 useReducer 시리즈를 마칩니다. 이 게시물에서 무언가를 배웠기를 바랍니다. 애플리케이션에서 상태를 처리하는 방법을 아래 주석에 공유하십시오.