Как структурировать Svelte магазин акций на бирже - PullRequest
Новая
       66

Как структурировать Svelte магазин акций на бирже

0 голосов
/ 10 января 2020

Я пытаюсь сохранить котировки акций в магазине Svelte, чтобы ставки и запросы на них обновлялись в режиме реального времени. Я не уверен, как структурировать хранилище, чтобы данные были реактивными и эффективными. Данные поступают из веб-сокета и выглядят так:

{'symbol':'AAPL', 'bid':305.52, 'ask':305.55}

Моя первоначальная попытка выглядит следующим образом: 

import { readable, writable } from 'svelte/store';

export let quotes = {}

function addQuotes(sym) {
  const quote = writable({
    bid: 0,
    ask: 0
  });
  quotes[sym] = quote;
}

Я пытаюсь сделать следующее: иметь единую карту цитат, доступную по всему SPA, но каждая отдельная цитата обновляет только свой собственный символ, а не всю страницу, с каждым изменением.

Это, очевидно, неправильно, но я не уверен, что делать вместо. (Это мой первый опыт работы с Svelte.)

1 Ответ

0 голосов
/ 10 января 2020

Вы на правильном пути.

Сохраните цены акций как ха sh в магазине writable(). 

// in stores.js
export const stocks = writable({})

Затем, когда вы захотите обновить цена или добавить новую акцию, вы звоните stocks.update(). 

// in stores.js
export function update(symbol, data) {
  // using `...` to destructure a copy, we don't want to overwrite previous value
  stocks.update(({...records}) => { 
    // now update the copy
    records[symbol] = data

    // return the new value for the store, this will trigger updates in templates that subscribe 
    return records
  })
}

В ваш .svelte компонент, импортируйте store.js


  import {stocks, update} from './store.js'
  import {onMount} from 'svelte'

  update('AAPL', {ask: 10, bid: 20})
  update('MSFT', {ask: 10, bid: 20})

  onMount(() => {
    setTimeout(() => update('AAPL', {ask: 10.20, bid: 10.25}), 2000)
    setTimeout(() => update('AAPL', {ask: 10.30, bid: 10.35}), 4000)
  })


<!-- use dollar sign in front of store name to make svelte auto-subscribe -->


  {JSON.stringify($stocks, null, 2)}
...