Initializing the Container with API call unstated.js (React Context API)

Question

I would like to simply initialize the Container state with data from an api call using unstated.js (a React Context wrapper).

I saw one example where the Container was instantiated with a couple vars:

import { Container} from 'unstated';

class WordlistContainer extends Container {

    constructor(...words) {
        super();

        this.state = {
            words: words
        };
    }
}


let wordList = new WordlistContainer('word1', 'word2');
export default wordList;

If I want to fetch some api data to pass into this Container's state - is this the right way to do it? Or should I pass props from a parent component? This is for loading data into a SPA when it first loads.

Answer 1

This ended up working:

​​import React, { Component } from 'react';
​​import RDOM from 'react-dom';
​​import { Container, Provider, Subscribe } from 'unstated';
​​
​​class ApiContainer extends Container {
​​  state = {
​​    loading: true,
​​    data: null
​​  }
​​  
​​  setApiResponseAsState = async () => {
​​    fetch.('someapi').then(res => res.jsoj()).then( data => this.setState({ data, loading: false });
​​  }
​​}
​​
​​class ApiConsumer extends Component {
​​  async componentDidMount() {
​​    this.props.setApiResponseAsState();
​​  }
​​  
​​  render() {
​​    return <div>{this.props.state}</div>
​​  }
​​}
​​
​​RDOM.render(
​​  <Provider>
​​    <Subscribe to={[ApiContainer]}>
​​      { props => <ApiConsumer {…props} />
​​      }
​​    </Subscribe>
​​  </Provider>
​​  , document.querySelector("#root");
​​)

Answer 2

A straight-forward approach is to use an instance of the container. An example implementation, for the WordlistContainer:

export default class WordlistContainer extends Container {
  fetchWords = async () => {
    const result = await fetch('https://example.com')
    const words = await result.json()
    this.setState({ words })
  }
  // etc... the rest of the container's code
}
// in this and most cases we want a singleton (but other instances can be created)
const wordlistContainer = new WordlistContainer()
export const getWordlistContainerInstance = () => wordlistContainer

Then, inject this instance in the provider like:

<Provider inject={[getWordlistContainerInstance()]}>

The fetching can be triggered anywhere, by calling getWordlistContainerInstance().fetchWords()