I have async functions in my services which return as follows.

Questions

1. What is the best way to do (contractAddress*displayValue) for every array item? and be able to display the returned value on the page.

2. What is the best way to store async data to an observable, be able to subscribe to it, and use the data further, is NGRX recommended here to manage the state?

   async getSanityTokens() {
        const coins = await fetch("https://i7ml51e6.api.sanity.io/v2021-10-21/data/query/production?query=*[_type=='coins']{
     ContractAddress,
     name,
     usdPrice
   }")
    const data = await coins.json();
    const address = data.result;
    return address
   }
   
   async getThirdWebTokens(contractAddress) {
   
     const  sdk = new ThirdwebSDK(
       new ethers.Wallet(
         environment.metamask_Key,
         ethers.getDefaultProvider('https://rinkeby.infura.io/v3/94ef7ea56a0e4585834ffbb4dfb3f8b8'))
         )
         const token = sdk.getToken(contractAddress);
         const tokens = await token.balanceOf("0x47444Bfc280Bd50e3a96ccFd031f7539d6B6E97A")
   
         return tokens
   }
   
   async getTokens() {
     const coins = await this.getSanityTokens();
     const promises = coins.map(coin=>this.getThirdWebTokens(coin.ContractAddress));
     const tokenArray = await Promise.all(promises);
     return tokenArray
   }
   

When accessed I get the result as follows

this.coin.getSanityTokens().then(res=>console.log("this is sanity data",res));

 this is sanity data 
(3) [{…}, {…}, {…}]
0: {ContractAddress: '0xBbCd8c1b5993062F2761CF07e27C2adebc55766F', name: 'Ethereum', usdPrice: '2088'}
1: {ContractAddress: '0xb74FbCF3b2e6b29B0b86f005FCC80eC649de7E30', name: 'Bitcon', usdPrice: '30947'}
2: {ContractAddress: '0x7a6DC36DD8CC525E15C2B14a415253153909fc24', name: 'Solana', usdPrice: '52'}
length: 3
[[Prototype]]: Array(0)

this.coin.getTokens().then(res=>console.log("this is thirdweb data",res));

this is thirdweb data 
(3) [{…}, {…}, {…}]
0: {name: 'Ethereum', symbol: 'ETH', decimals: 18, value: BigNumber, displayValue: '8.0'}
1: {name: 'Bitcoin', symbol: 'BTC', decimals: 18, value: BigNumber, displayValue: '5.0'}
2: {name: 'Solana', symbol: 'SOL', decimals: 18, value: BigNumber, displayValue: '12.0'}
length: 3
[[Prototype]]: Array(0)

CodePudding user response：

1. Combine the result of both getThirdWebTokens and getSanityTokens So inside change getTokens like this:

async getTokens() {
  const coins = await this.getSanityTokens();
  const promises = coins.map(coin => {
            const tokenValues = this.getThirdWebTokens(coin.ContractAddress);
            return {...coin, ...tokenValues, usdTotal: ( coin.usdPrice) * ( tokenValues.displayValue)
});
  const tokenArray = await Promise.all(promises);
  return tokenArray
}

2. In most cases if you have a basic application, NGRX may add some unnecessary overhead. Instead of adding it, you can simply declare a state service, which can be provided inRoot that stores the necessary data. Something like:

@Injectable({ providedIn: 'root' })
export class StateService {
    private stateSubject = new BehaviorSubject<SomeModel>({});

    state$ = this.stateSubject.asObservable();

    get currentState(): SomeModel {
        return this.stateSubject.value;
    }

    setState(state: Partial<SomeModel>) {
        const oldValue = this.stateSubject.value;
        this.stateSubject.next(...oldValue, ...{state || {}});
    }

then when you need to read it from somewhere, just subscribe to this.stateService.state$. And remeber to unsubscribe or use the async pipe afterwards.