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>
      );
    }
  • 相关阅读:
    KVM环境搭建RHCS
    修改virt-manager默认磁盘格式
    前端基础之html
    并发编程
    网络编程
    常用模块
    模块与包
    迭代器、生成器、面向过程编程
    闭包函数和装饰器
    函数
  • 原文地址:https://www.cnblogs.com/Answer1215/p/13488392.html
Copyright © 2011-2022 走看看