RxJS 및 <$> 세션을 사용하여 React에서 데이터 가져오기
24804 단어 reactrxjswebdevjavascript
function App(){
const [data, setData] = useState(null);
// useEffect for fetching data on mount
useEffect(() => {
fetch('//...')
.then(response => response.json())
.then(data => setData(data));
}, []);
return <div>Data: { data }</div>
}
response.ok괜찮아 보이죠?응, 이런 방법은 몇 가지 중요한 특성이 부족하다.
RxJS는 비동기식 이벤트(예: 캡처 및 UI 이벤트)를 관리하고 조율하는 데 매우 강력한 도구입니다.그것을 배우면 너에게 10배의 보답을 줄 것이다!
제발 긴장하지 마세요. 제가 어떻게 추가하고 사용하는지 가르쳐 드릴게요.🙂
tl;dr: resulting app playground 및 <$> fragment library
응용 프로그램 업데이트부터 RxJS를 사용합시다!
🔋 전기가 통하다
먼저 RxJSfromFetch로 전환합니다. - 패키지는 native fetch입니다.
function App(){
const [data, setData] = useState(null);
useEffect(() => {
fromFetch('//...')
.subscribe(response =>
response.json().then(data => setData(data))
);
}, []);
return <div>Data: { data }</div>
}
.subscribe 방법은 Promises.then의 유사한 방법입니다. - RxJS 흐름으로부터 값을 업데이트받습니다(현재는 하나의 업데이트만 처리하지만 더 많은 업데이트가 있습니다.).subscribe 또한 하나의 대상을 되돌려줍니다. 우리는 그것으로 구독을 취소할 수 있습니다.이것은 우리가 첫 번째 문제를 해결하는 데 도움을 줄 것이다. 구성 요소를 마운트할 때 캡처를 취소하는 것이다.function App(){
const [data, setData] = useState(null);
useEffect(() => {
const subscription = fromFetch('//...')
.subscribe(response =>
response.json().then(data => setData(data))
);
// this function will be called on component unmount
// it will terminate the fetching
return () => subscription.unsubscribe();
}, []);
return <div>Data: { data }</div>
}
만세: 완성 1, 2 남았습니다!
계속하기 전에 작은 정리를 합시다.
🔧 재구성 및 <$> 세션
보시다시피 우리는
response.json() 함수에서 subscribe 비동기식 조작을 사용합니다. 이것은 나쁜 방법입니다. 원인은 매우 많습니다. 만약에 우리가 이미 response.json() 해석 단계에 있다면 이 흐름은 다시 사용할 수 없고 취소되면 작업을 할 수 없습니다.RxJS 연산자
mergeMap를 사용하여 이 문제를 해결합니다.function App(){
const [data, setData] = useState(null);
useEffect(() => {
const subscription = fromFetch('//...')
.pipe(
// mergeMap is an operator to do another async task
mergeMap(response => response.json())
)
.subscribe(data => setData(data));
return () => subscription.unsubscribe();
}, []);
return <div>Data: { data }</div>
}
fetch 패키지가 아닌 RxJSajax.getJSON를 사용할 수 있음을 잘 지적하고 건너뛰기
mergeMap.E、 g.:ajax.getJSON(url).subscribe(/* etc. */).교육과 게으름의 원인으로 나는 보류할 것이다 fromFetch 방법🙂우리는
response.json() 조작과 결과 처리를 분리할 것이다.우리의 subscribe 처리 프로그램은 데이터 표시만 책임지고 있으며, 이제 우리는 <$> 세션을 사용할 수 있습니다!<$> - React 구성 요소에 RxJS 값을 표시하는 작은 (1Kb) 패키지입니다.
그것은 우리가 구독할 수 있는 흐름을 제공하고 적당한 위치에 업데이트를 표시할 것이다.구성 요소를 마운트 해제할 때 구독을 취소하기 때문에 걱정할 필요가 없습니다!
function App(){
// we need useMemo to ensure stream$ persist
// between App re-renders
const stream$ = useMemo(() =>
fromFetch('//...')
.pipe(
mergeMap(response => response.json())
)
, []);
return <div>Data: <$>{ stream$ }</$></div>
}
useState 및 .subscribe: <$> 이 모든 것을 완성했습니다!따라서 우리는 우리의 임무를 계속 해결하기 위해 더 많은 조작부호를 추가할 준비를 하고 있다.마운트 표시기를 추가합시다!
⏳ 마운트 표시기
function App(){
const stream$ = useMemo(() =>
fromFetch('//...')
.pipe(
mergeMap(response => response.json()),
// immediately show a loading text
startWith('loading...')
)
, []);
return <div>Data: <$>{ stream$ }</$></div>
}
startWith 제공된 값을 사용하여 비동기식 데이터 흐름을 미리 전송합니다.우리의 예에서 그것은 약간 이렇게 보인다.start -o---------------------------o- end
^ show 'loading' ^ receive and display
| immediately | response later
다음에는 오류가 발생합니다.
⚠️ 오류 처리
다른 연산자
catchError 에서는 추출 오류를 처리할 수 있습니다.function App(){
const stream$ = useMemo(() =>
fromFetch('//...')
.pipe(
mergeMap(response => response.json()),
catchError(() => of('ERROR')),
startWith('loading...')
)
, []);
return <div>Data: <$>{ stream$ }</$></div>
}
만약 당신이 더욱 깊이 파고들고 싶다면, 나는 관리 오류에 관한 상세한 글을 썼습니다. "Error handling in RxJS or how not to fail with Observables" - 억제, 전략 반퇴, 간단한 재시도와 지수 지연. - 모든 것이 거기에 있습니다.
완성 3, 나머지 0!
마지막으로 이동합시다
div:🖼 향상된 사용자 인터페이스
가장 가능성이 있는 것은 우리가 정확하게 강조 표시된 오류와 스타일 (심지어 애니메이션) 로드 표시기를 표시하려고 하는 것이다.이렇게 하려면 JSX를 흐름으로 직접 이동해야 합니다.
function App(){
const stream$ = useMemo(() =>
fromFetch('//...')
.pipe(
mergeMap(response => response.json()),
// now we'll map not only to text
// but to JSX
map(data => <div className="data">Data: { data }</div>),
catchError(() => of(<div className="err">ERROR</div>)),
startWith(<div className="loading">loading...</div>)
)
, []);
return <$>{ stream$ }</$>
}
🍰 보상: 깜박임 방지
때때로 응답이 너무 빠르면 로드 표시등이 순식간에 깜박이는 것을 볼 수 있다.이것은 통상적으로 취할 수 없는 것이다. 왜냐하면 우리는 이미 지시기 애니메이션을 불러오는 데 오랜 시간이 걸렸고, 사용자가 그것을 간파할 수 있기를 희망하기 때문이다.🙂
이 문제를 해결하기 위해 캡처 관찰 가능한 생성을 분리하고 500ms의 지연으로 캡처를 추가합니다.
function App(){
const stream$ = useMemo(() =>
customFetch('//...').pipe(
map(data => <div className="data">Data: { data }</div>),
catchError(() => of(<div className="err">ERROR</div>)),
startWith(<div className="loading">loading...</div>)
)
, []);
return <$>{ stream$ }</$>
}
function customFetch(URL) {
// wait for both fetch and a 500ms timer to finish
return zip(
fromFetch(URL).pipe( mergeMap(r => r.json()) ),
timer(500) // set a timer for 500ms
).pipe(
// then take only the first value (fetch result)
map(([data]) => data)
)
}
4 완성,🍰 왼쪽
마지막 몇 마디:
🎉 오트로
만약 네가 놀고 싶다면, 이것은 우리의 것이다.
React 어셈블리에서 RxJS를 사용하기 시작하려면 다음과 같이 하십시오.
npm i rxjs react-rxjs-elements
<$>.import { timer } from 'rxjs';
import { $ } from 'react-rxjs-elements';
function App() {
return <$>{ timer(0, 1000) } ms</$>
}
본문을 읽어 주셔서 감사합니다!수동적인 하루를 보내다🙂
하면, 만약, 만약...❤️ 🦄 📘 버튼
추가 React, RxJS 및 JS 게시물:
Kos Palchyk 회사🧵
@kddsky 회사
녹음으로 돌아가니 프레임워크 스틸이 너무 재밌어 보여요!resulting app 🙏 thx~#️⃣
14:2020년 7월 21일 오후 20시
구
오.
끝내다
다행히도
화목하다
심사 제공!
Reference
이 문제에 관하여(RxJS 및 <$> 세션을 사용하여 React에서 데이터 가져오기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/rxjs/fetching-data-in-react-with-rxjs-and-lt-gt-fragment-54h7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
