useReducer() | 프로젝트와 반응 후크

useReducer

반응 자체에서 Redux 개념을 모방하기 위한 내장된 반응 후크입니다. Redux 개념에 익숙하다면 요점을 알게 될 것입니다.

REDUX에 대해 모르십니까? 🙈

➡️➡️ 여기에서 읽어보세요

참고: 코드 스니펫 또는 코드 참조는 이 튜토리얼을 위해 만든 이 Github 저장소에서 가져왔습니다. 장바구니에 제품을 추가, 제거하는 기본 장바구니 응용 프로그램이며 제품 수량을 늘리거나 줄일 수 있습니다.

Github 레포 : useReducer_tutorial
애플리케이션의 라이브 데모: Click Here

시작합시다 😈😈👇👇

An alternative to useState. Accepts a reducer of type (state, action) => newState, and returns the current state paired with a dispatch method. (If you’re familiar with Redux, you already know how this works.)

useReducer의 공식 정의Official Doc

선언 구문은 다음과 같습니다.

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

useReducer를 사용하는 주요 동기는 응용 프로그램에서 저장소 또는 상태로 알려진 공통 위치를 갖는 것입니다. 여기서 구성 요소에 직접 액세스할 수 있는 원하는 데이터를 저장할 수 있습니다. 그들은 해당 상태에서 해당 데이터를 가져오거나 필요에 따라 해당 상태를 업데이트할 수 있습니다. (스토어 업데이트에 문제가 있습니다. 나중에 블로그에서 확인하겠습니다.)

장바구니 애플리케이션에는 두 가지 주요 구성 요소가 있습니다.

제품 섹션

카트 섹션

둘 다 동일한 상태에 액세스해야 하므로 상위 구성 요소에서 상태를 선언해야 합니다. 이 경우에는 App.js입니다.

import { productReducer } from  './reducers'
const  App = () => {
    const  initialState = {
        products: [],
        cart: []
    }  

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

2개의 키 값 쌍을 갖도록 초기 상태를 선언했습니다.

제품 []

카트 []

감속기의 경우 가독성을 높이기 위해 다른 파일에서 가져옵니다.



그리고 자식 구성 요소가 동일한 상태에 액세스하려면 이 두 가지 즉, state와 dispatch를 동일한 상태와 상호 작용하려는 자식 구성 요소에 prop으로 전달해야 합니다.

Note : If you are not comfortable with this code that what's state, action, action.payload, type etc., you need to brush up redux
concepts. More about that here :

특정 유형의 디스패치를 ​​사용하여 요구 사항에 따라 상태를 업데이트합니다. 직접적으로가 아니라 디스패치를 ​​통해서만 상태를 업데이트할 수 있습니다.

감속기 기능이 2개의 매개변수, 즉 상태와 동작을 허용하는지 확인하세요.

const  productReducer = (state, action) => { }

제품 구성 요소가 상태와 상호 작용하는 방식:

src/components/product/index.js

일부 샘플 제품 데이터를 가져오기 위해 더미 제품 API를 사용하고 있습니다. 따라서 제품 구성 요소에서 제품 목록에 액세스할 수 있도록 모든 제품 세부 정보를 상태에 저장합니다.

const fetchProduct = async () => {
        const res = await axios.get('https://dummyjson.com/products');
        setProducts(res.data.products);
        dispatch({
            type: 'ADD_TO_PRODUCT',
            payload: res.data.products
        });
    }

디스패치를 ​​사용하여 모든 제품 목록을 상태로 업데이트하고 있습니다. 그리고 상태의 장바구니[]에 있는 데이터를 기반으로 Product 컴포넌트는 버튼을 '장바구니에 추가' 또는 '장바구니에서 제거'로 동적으로 변경합니다.

카트 구성 요소가 상태와 상호 작용하는 방식:

src/components/cart/index.js

const  Cart = ({ state, dispatch }) => {
const { cart } = state;

표시된 대로 상태에 직접 액세스합니다. 그리고 카트 항목 수량을 변경하면서 상태 업데이트가 필요한 경우 특정 작업 유형 및 페이로드 데이터와 함께 디스패치를 ​​사용하여 리듀서가 요구 사항에 따라 상태를 변경하도록 지시합니다.

const handleInc = (id) => {
        dispatch({
            type: 'INCREASE_QTY',
            payload: id
        });
    }

    const handleDec = (id) => {
        dispatch({
            type: 'DECREASE_QTY',
            payload: id
        });
    }

그게 전부입니다. 이제 useReducer가 무엇인지 이해했습니다. 😎😎

더 많은 연습을 위해 github repo를 가지고 놀 수 있습니다.
그때까지 아디오스 🙌

좋아요 잊지마세요 💗