Parece um caso de uso simples, mas não consigo descobrir. Quero exibir uma lista de itens recuperados de uma solicitação para uma API remota sobre HTTP. Gostaria que a tela aparecesse em branco inicialmente enquanto a solicitação estivesse ocorrendo e depois fosse preenchida com os resultados quando disponíveis.

Então, pensei que teria dois componentes: o componente idiota da "lista de itens" e um componente "apresentacional" do wrapper que, de alguma forma, inicia a solicitação remota ao renderizar o componente idiota com a lista de itens vazia do estado.

Eu sei como iniciar uma solicitação remota inicial: usecomponentDidMount().

e eu sei como lidar com despacho / conexão: eu quero usar algo como:

const OuterWrapper = connect(
   mapStateToProps,
   mapDispatchToProps
) (ItemList)

mas como faço para que essas coisas funcionem juntas? usandoconnect() parece colocar as coisas fora de alcance. Quero iniciar de forma assíncrona a solicitação da API e, de alguma forma, fazer um `dispatch (updateItemList (itens)) para informar ao mundo que há novos itens a serem adicionados ao estado.

EDITAR:

eu encontreireagir-ciclo de vida-componente, mas não entendo o exemplo de uso, antes e depois. No caso mais longo, por que égetAllTehDatas referenciado duas vezes? Por que estámapDispatchToProps claramente sem umkey:value par? Por que é necessário lá secomponentDidMount() chama isso? E o que você faz se esse método precisar fazer uso dedispatch()?