Инициализация контейнера с помощью вызова API unstated.js (React Context API)

Question

Я хотел бы просто инициализировать состояние контейнера с данными из вызова API, используя unstated.js (оболочка React Context).

Я видел один пример, когда экземпляр Container был создан с помощью пары переменных:

import { Container} from 'unstated';

class WordlistContainer extends Container {

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

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


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

Если я хочу получить некоторые данные API для перехода в это состояние Контейнера - это правильный путь? Или я должен передать реквизиты из родительского компонента? Это для загрузки данных в SPA при первой загрузке.

Answer 1

Прямой подход заключается в использовании экземпляра контейнера. Пример реализации, для 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

Затем вставьте этот экземпляр в провайдера, как:

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

Выборка может быть запущена в любом месте , позвонив getWordlistContainerInstance().fetchWords()

Answer 2

Это сработало:

​​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");
​​)