[React] Handle Recoil Asynchronous Selectors using Loadables in React
作者:互联网
When consuming asynchronous selectors in Recoil, you're going to need to tell React what to render while the API is fetching its data.
One way to solve this issue is by setting a fallback value using React Suspense
. But there's another option that gives you fine-grained control, and that's by preventing the selectors from returning a promise in the first place.
<Suspense fallback={<div style={{color: 'red'}}>Loading weather...</div>}> <Weather /> </Suspense>
In this lesson we're going to have our selectors return Recoil's Loadable
object, which always contains the current selector value (contents
) and what state the selector is in (state
). By consuming this with the useRecoilValueLoadable
hook rather than the regular useRecoilValue
hook, we can manually define whatever we want React to render in each of the 3 states: hasError
, hasValue
, and loading
.
import React from "react"; import { atom, useRecoilState, selector, useRecoilValueLoadable } from "recoil"; import "./styles.css"; import { fetchWeather } from "./WeatherApi"; const cityAtom = atom({ key: "city", default: "" }); const weatherSelector = selector({ key: "weatherSelector", get: ({ get }) => { const city = get(cityAtom); return fetchWeather(city); } }); const Weather = () => { const { state, contents } = useRecoilValueLoadable(weatherSelector); switch (state) { case "hasValue": return contents; // val case "hasError": return contents.message; // error msg case "loading": return <div style={{color: 'red'}}>Loading weather...</div>; default: return ""; } }; export default function App() { const [currentCity, setCurrentCity] = useRecoilState(cityAtom); return ( <div className="App"> <h2>Enter City:</h2> <input value={currentCity} onChange={(e) => { setCurrentCity(e.target.value); }} /> <h4> <Weather /> </h4> </div> ); }
标签:selector,return,Selectors,React,state,import,const,Handle 来源: https://www.cnblogs.com/Answer1215/p/13663812.html