반응 후크 및 비즈니스 로직
8219 단어 functionaltypescriptreact
개요
후크는 사용할 수 있습니다
map
.매우 가벼운 라이브러리입니다. 종속성이 없습니다.
https://www.npmjs.com/package/@bird-studio/use-map
사용 사례
useSWR로
import useSWR from "swr";
import type { SWRResponse } from "swr";
import { useMap } from "@bird-studio/use-map";
type MainRes = {
value: string;
};
// Easy to test because it does not use hook
const businessLogic = (p: SWRResponse<MainRes>) => {
if (p.data.value === "foo") {
return {
...p,
data: {
...p.data,
isFoo: true,
},
};
}
return {
...p,
data: {
...p.data,
isFoo: false,
},
};
};
const useMain = () => {
const res = useMap({ useHook: () => useSWR("/main", fetchMain) })
.map(businessLogic)
// Can be continuous.
.map((v) => v).value;
};
useQuery와 함께
import { useQuery } from "@apollo/client";
import { useMap } from "@bird-studio/use-map";
import { QUERY } from "./QUERY";
// Easy to test because it does not use hook
const reducer = (p) => {
if (p.loading) {
return {
type: "loading",
};
}
if (p.error) {
return {
type: "error",
...p,
};
}
if (p.data) {
return {
type: "success",
data: p.data,
};
}
return new Error("🤬");
};
const useMain = () => {
const res = useMap({ useHook: () => useQuery(QUERY) }).map(reducer).value;
};
Reference
이 문제에 관하여(반응 후크 및 비즈니스 로직), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/akiratoriyama/react-hooks-and-business-logic-2j77텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)