useReducer의 기초

이 후크는 상태를 관리하는 데 사용할 수 있으며 useState 후크의 대안입니다. 관리하려는 상태가 복잡할 때는 useReducer를 사용하는 것이 좋습니다.

useReducer는 불변성을 촉진하고 데이터는 항상 한 방향으로 흐릅니다.

useReducer를 구현하려면 다음 단계를 따라야 합니다.

감속기 만들기

import _ from "lodash";

const initialState = {
    favorites: [],
};
const favoritesReducer = (state, action) => {
    switch (action.type) {
        case "ADD_TO_FAVS":
            return {
                ...state,
                favorites: [...state.favorites, action.payload],
            };
        case "REMOVE_FROM_FAVS":
            const newFavorites = _.pull(state.favorites, action.payload);
            return {
                ...state,
                favorites: newFavorites,
            };
        default:
            return state;
    }
};

구성 요소 내에서 useReducer 호출

const Cryptos = () => {
    const [state, dispatch] = useReducer(favoritesReducer, initialState);
    const addToFavs = (newFavorite) => {
        dispatch({ type: "ADD_TO_FAVS", payload: newFavorite });
    };
    const removeFromFavs = (favoriteToBeRemoved) => {
        dispatch({ type: "REMOVE_FROM_FAVS", payload: favoriteToBeRemoved });
    };
    const { favorites } = state
    // Returning component to be rendered
};