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>
      );
    }
  • 相关阅读:
    500 多个 Linux 命令文档搜索
    C++ 字符串基本操作
    串的模式匹配算法
    查看、启动、关闭防火墙
    天润融通面试
    LeetCode 169. 求众数
    【面试题】人人车一次面试总结
    一个完整的 JS 身份证校验代码
    oracle多表查询
    百度地图的Icon
  • 原文地址:https://www.cnblogs.com/Answer1215/p/13488392.html
Copyright © 2011-2022 走看看