There is a ProductList component that displays a list of products after the page loads. But this list must also be obtained by making a request for the API. There is a saga that makes this request and creates an action show(items) passing it a list of goods.

The question is, where is the best place to run the initial init action, which will catch the saga?

Now I have a ProductList component on will mount pulling the init action. But this is somehow wrong. I was satisfied with this behavior until I needed to load different product lists depending on the conditions (for example, on the URL path), because I need to transfer these conditions to props, and I would like to transfer only one props - products already formed to ProductList .

    1 answer 1

    Found the answer. The component is connected to the application using a container. Here in the container, for example, in the componentDidMount method, we make a request to the API, and write the result in the state container. When updating the container's state, the props of the component will be updated.

     class ItemsContainer extends React.Component { state = { items: [] }; componentDidMount() { api.request().then((items) => ( this.setState({ items: items }) )) } render() { return ( <ItemsList items={this.state.items} /> ) } }