原子字典结构

Question

我在我的 React 应用程序中从 websocket 接收数据。数据包含股票代码的价格：

{symbol: "aapl", price: 150}

我想在单个 Atom 中保存每只股票的价格，其中键是代码，数据是价格。可能有数千个 Atom，每个对应一个独特的股票。

有没有办法动态创建一个新的 Atom，设置（或更新）它的数据，并在应用程序的其他地方读取 Atom 状态？本质上，一个原子字典，其中键是股票代码，状态是股票价格。

编辑：这应该更清楚地说明我的问题： https://github.com/facebookexperimental/Recoil/issues/1406

上下文：我使用 websocket 来传输股票价格。实时数据每 0.25 秒打包一次，包含以下格式的数百个股票价格： {symbol:"aapl", price:150}

问题：我需要为每只股票创建一个独立的状态，随着数据的到来更新它们的价格。它还需要高性能，因为有时我每秒接收 8000 只股票。股票价格将在整个应用程序的组件中使用，其中一些组件根本没有连接到父 websocket 组件。

据我所知有两种选择：

创建一个包含整个 websocket 消息的大 Atom，然后订阅这一大块状态

-这会导致所有订阅的组件立即更新，不是吗？

为每个唯一的股票生成一个原子，并在收到新股票价格时更新原子

-我不知道如何在反冲中做到这一点

本质上它归结为键值对，其中键是股票代码，值是存储价格状态的 Atom。有没有一种方法可以创建这样的结构并允许独立组件订阅这些原子？例如。组件“X”订阅对应于股票“AAPL”的状态...有什么想法吗？

Answer 1

由于您正在寻找全局状态管理framework/tools。您有几个选择。

React 上下文 - 如果您不想要任何第 3 方包

React Redux - 基本上是 React 全局状态管理的行业标准。

MobX - 用不同的方法做同样的工作。通常比 Redux 快，但不太受欢迎。

Answer 2

要回答我自己的问题。迟到总比不到好。

我在atoms.js

中定义了原子

import { atomFamily } from "recoil";

export const stockAtom = atomFamily({
    key: "symbol",
    default: {},
});

在我的 setter 文件中（我想在其中设置原子值）：

import { useRecoilTransaction_UNSTABLE } from "recoil";
import { stockAtom } from "./atoms";
  // ... functional component
  const updateState = useRecoilTransaction_UNSTABLE(
    ({ set }) => (stockObj) => {
      for (const stock of stockObj) {
        // set the atom of stock.sym to the jsondata from the websocket
        set(stockAtom((stock.sym).toLowerCase()), stock);
      }
    },
    []
  );

  // websocket on message
  const _onMessage = (msg) => {
    const data = JSON.parse(msg.data)
    updateState(data)
  }
  // ...

然后在一个文件中，我想 consume/get 中的原子：

import { stockAtom } from "./atoms";
import { useRecoilValue } from "recoil";
// passed stock sytmbol as props string
const WatchlistItem = (props) => {
  // consume the stock price of atom with key props.symbol
  const symbolData = useRecoilValue(stockAtom(props.symbol));
  return (<div> symbolData["price"]</div>);
}

我建议使用 objects/dicts 进行错误处理，我在这个示例中省略了它

原子字典结构

Atom dictionary structure

reactjs

recoiljs