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
};
Reference
이 문제에 관하여(useReducer의 기초), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/cyberdelahoz95/fundamentals-of-usereducer-4h0f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)