Vamos para o app.js e a gente vai precisar do chamado Apply Middleware. Função Apply Middleware do Redux. Eu adicionei aqui. Depois o Create Store Apply Middleware. E aqui nesse Under the Store, eu vou fazer um Create Variável, chamado Create Store with Middleware. E vou chamar a função Apply Middleware. Primeiro argumento vai ser o Redux Promise, o módulo. A gente instalou, mas não importou ainda, mas vamos só terminar essa linha. E o segundo argumento aqui nesse outro parêntese vai ser o Create Store do Redux. Oh, o que é isso? Store. Show. Bom? E o semicolon. Então eu criei essa variável que vai ser uma função Create Store with Middleware. Chamei o Apply Middleware do Redux. Passei o Redux Promise, vamos importar isso também, que não tem. Redux, React Redux, Import. Acho que é Redux Promise, Prom... Redux Promise. Acho que o módulo é assim, não precisa de estruturar, que é só o módulo. E... Passei esse. E passo o Create Store do Redux. E com isso eu posso chamar essa função e passar os meus reducers e vai ter o Middleware, o Redux Promise, funcionando automaticamente. Toda vez que eu tiver um Action Creator, tá bom? Aqui Create Store with Middleware, mudei o nome pra chamar esse cara aqui e adiciona o Redux as como argumento. E já passo o Store com o Middleware. Tá bom? Agora vamos voltar, salvar isso e voltar para o Index do Action Creator, tá bom? Volta pra lá, para o Index do Action Creator. Agora, o que que a gente vai fazer? Eu vou pôr esse cara dentro de uma variável, tá bom? Vou chamar Request, talvez. E... Deixa eu remover isso aqui. Então, Axios.get, esse cara retorna o promessa. O promessa vai dentro dessa variável. E... Eu vou voltar o payload e vou botar, em vez de Response, Request. Você tá passando Request, que é uma promessa, JavaScript Promise, né? O Redux Promise vai pegar, quando vê que você tá retornando essa ação com payload, com uma promessa, vai pegar a promessa, vai esperar a promessa ser resolvida. E quando ser resolvida, finalmente vai mandar essa Action, e em vez de ter o Request, vai a Response, vai ser lá, vai ser substituído, tá bom? Vou explicar de novo. Tá bom? Vamos... A gente faz o pedir HTTP, mas o Axios.get retorna o Promise. Essa promessa demora um pouco para ser resolvida, porque vai fazer pedir ao outro servidor. Tá bom? Eu passo essa promessa com o payload nessa Action aqui. Porque a gente instalou o Promise, Redux Promise? Toda vez que a gente retorna uma Action, o Redux Promise vai ver o payload se tiver a Promise. Ele tem uma Promise aqui, pega essa Promise, espera ela ser resolvida. Quando for resolvida, aí é que vai retornar a Action. E em vez de ter o Request como a payload, vai ter a resposta, que obteu da promessa. Tá bom? Vou voltar aqui, salvar. Agora eu vou para o Action Creator, vou do Action Creator, eu vou para o Reducer. Esse cara aqui. Agora eu quero definir o meu Reducer. Vou olhar aqui, vou criar um novo arquivo, vou chamar a PuzzReducer.js e dentro do Reducer, vou export default, tá bom? State. Eu só estou copiando o que eu tinha aqui. Esse cara aqui que vou por em outro arquivo. Então State e o segundo argumento vai ser o Action, como eu disse antes. Você é, função de A. E esse é o Reducer. Antes a gente só tinha isso, né? Você quer a mesma coisa que esse cara aqui? E vou salvar. Antes da Return State, você vai dar o console log na Action. Para ver o que acontece. Isso realmente, o estado é objeto azil. Vamos ver o que acontece. Ah, tem um plugin conectado a esse PuzzReducer importado no Index aqui. Em vez de ter isso, eu vou ter PuzzReducer de outro arquivo. Import PuzzReducer from PuzzReducer. Não é o que eu use, que eu usei, export default, então não precisa distritorar. Vamos ver o que acontece. Não tem problemas. Eu atualizei meu aplicativo. Se note que tem um console log aparecendo aqui. E é por causa do Redux. Que ele faz uns negócios inicialmente, quando o aplicativo começa. Ele manda umas actions. E por isso está aparecendo console log. Que a gente deu console log e também aparece essas ações iniciais que o Redux faz. Mas o que interessa a gente é essa linha aqui, o final. As senosas que tem o object, com payload e com type. Na verdade, isso é o action que a gente deu console log. Aqui. Se note que no momento que o list é montado, chama o ThisPropsFatPost, que é o action creator. E esse cara faz o pedido get. E depois que a promessa é resolvida, manda esse action. A despachada para todos os reducers. O post reducers pega a action e a gente deu console log. E essa action foi a que a gente mandou. FatPost e tem um payload. Vamos olhar o que tem no payload. Um object e tem data, data e está tudo aqui. Se note que o Redux Promise funcionou. Tá bom? Agora, voltando aqui. No Redux, normalmente, o que a gente vai fazer? A gente vai dar um switch no action.type. E vai dar um case. Se for FatPost, a gente vai retornar o novo estado. Nesse novo estado, eu quero os posts, que vai ser o action payload data. Você nota que a gente viu no browser que o object é payload, tem a propriedade de data que tem todos os posts. Então, eu quero que posts do application state sejam todos esses dados aqui. Normalmente, a gente também passa o estado que como estava antes. Então, a gente faz .. .state e com as coisas adicionais. Que adiciona ao estado. Esse aqui é a mesma coisa que falar state.comcat, esse outro cara. É um novo jeito de falar isso no JavaScript, s6. Esse três pontos significa que, primeiro de tudo, state é um object, tá bom? Um object. E o que é que você faz? . .ponto ele pega todas as chaves dentro do objeto. Todas as propriedades e põe dentro desse novo objeto. Então, se você tivesse o state, se fosse um objeto, um name, sei lá, assim. E se eu fizesse assim, ele ia criar um novo objeto e ia copiar esse cara aqui. Copia esse, põe aqui. Copia esse, põe aqui. É isso que está acontecendo aqui. A gente copia as coisas do estado antigo e adiciona o post e vai adicionar esse cara aqui. Essas coisas assim. Tá bom? Normalmente, a gente sempre tem que retornar o estado se nenhum dos casos fosse relacionados. Desse jeito está, você pode deixar aqui ou pode adicionar no default do switch. Mesma coisa. Eu vou botar aqui dentro, só para... Porque se nenhum dos casos executarem, vai executar o return state. Sempre tem que retornar o estado como está. Como está. Bom? Nesse caso, eu pudei essa constante aqui. Eu acho que não tem essa constante definida. Eu não sei como eu defini lá. Vou voltar a actions. Ah, eu defini como string. Tá bom, então vou botar um string aqui. Normalmente a gente põe a constante e define a constante em outro arquivo. Vou fazer isso depois. Agora vamos... Eu quero dar um console log. Aqui. Para ver como é que está o state. Vai estar vazio. Essa salva aí vai estar funcionando. Tudo ok, né? Agora já temos os posts dentro do estado. Só falta conectar o estado usando o map state de props dentro da list component. Vamos fazer isso para a sessão.