zoukankan      html  css  js  c++  java
  • [React] Display Computed Data Using Recoil Selectors in React

    In this lesson, we're going to show how RecoilJS selectors are used to display computed data in React. While atoms are the go-to state objects in Recoil, selectors are the ideal choice when data can be computed based on existing state - like displaying the price of a restaurant order. And your selector output always remains up to date - just subscribe to it using one of the RecoilJS hooks.

     Define a 'atom':
    const order = atom({
      key: "order",
      default: ["garlic bread"] // on the house!
    });

    Use a atom:

    import { atom, useRecoilValue, selector } from "recoil";
    
      const myOrder = useRecoilValue(order);
    
      return (
        <div className="App">
          <h1>The Brunch Place</h1>
          {myOrder.map((food, i) => (
            <p key={i}>{food}</p>
          ))}
        </div>
      );

    Compute value based on state: using selector:

    import { atom, useRecoilValue, selector } from "recoil";
    
    const orderInfo = selector({
      key: "orderInfo",
      get: ({ get }) => {
        return {
          totalPrice: get(order)
            .map((food) => priceList[food])
            .reduce((current, sum) => current + sum, 0)
        };
      }
    });

    Use selector:

    const orderStats = useRecoilValue(orderInfo);
      <h4>Total Price: ${orderStats.totalPrice} </h4>

    Full code:

    import React from "react";
    import "./styles.css";
    import { atom, useRecoilValue, selector } from "recoil";
    
    const priceList = {
      coffee: 2,
      "garlic bread": 0,
      pancakes: 10
    };
    
    const order = atom({
      key: "order",
      default: ["garlic bread"] // on the house!
    });
    
    const orderInfo = selector({
      key: "orderInfo",
      get: ({ get }) => {
        return {
          totalPrice: get(order)
            .map((food) => priceList[food])
            .reduce((current, sum) => current + sum, 0)
        };
      }
    });
    
    export default function App() {
      const myOrder = useRecoilValue(order);
      const orderStats = useRecoilValue(orderInfo);
    
      return (
        <div className="App">
          <h1>The Brunch Place</h1>
          {myOrder.map((food, i) => (
            <p key={i}>{food}</p>
          ))}
          <h4>Total Price: ${orderStats.totalPrice} </h4>
        </div>
      );
    }
  • 相关阅读:
    第009讲:了不起的分支和循环3
    Term_Application
    十大编程算法助程序员走上高手之路
    每天工作4小时的程序员
    编程真相_节选
    Sublime_Snippet
    VIM资源管理
    微信企业号开发资源整理
    vitruviano
    VIM_git
  • 原文地址:https://www.cnblogs.com/Answer1215/p/13488392.html
Copyright © 2011-2022 走看看