zoukankan      html  css  js  c++  java
  • [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: hasErrorhasValue, 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>
      );
    }
  • 相关阅读:
    python 玩转列表list
    Python入门之_水仙花数
    自兴人工智能 字符串
    自兴人工智能 元组
    自兴人工智能 列表
    自兴人工智能 python特点了解
    python走迷宫
    (自兴人工智能) python 元组
    (自兴人工智能) 玩转 python 字符串
    (自兴人工智能)Python 列表(List)的灵活使用
  • 原文地址:https://www.cnblogs.com/Answer1215/p/13663812.html
Copyright © 2011-2022 走看看