Resumo do Transcript

Então, a gente vai precisar do createStore do Redux. Então, vou importar essa função chamada createStore fromRedux, que vai ser usada para criar um Redux Store, criar um applicationState, que a gente vai passar para provider, que vai disponibilizar por toda o aplicativo. Então, você pode chamar aqui createStore com, você tem que dar o argumento, os reducers, que a gente não tem ainda. Ou você pode fazer uma variável fora desse app, eu vou fazer isso. Então, eu vou chamar a variável de Store. Então, eu vou chamar constStore, vai ser o createStore passado com os reducers. Então, o que é que é esse reducer? A gente não tem ainda, mas tem um index aqui que a gente pode definir. Então, vamos só importar os reducers, eu vou dar um import reducers da pasta chamada reducers. E como está nesse arquivo index, eu não preciso escrever index, se for o nome index, pode remover que automaticamente vai olhar no index dentro dessa pasta chamada reducers. Agora não tem nada, se você notar, mas a gente vai definir. Espera um pouco aí. Então, tem o provider, injecta a propriedade Store, que é uma Store criada pelo Redux. Redux tem essa função createStore que pega com o argumento os reducers e cria uma Store, cria o chamado applicationState. É? Cria. E eu passo isso aqui. Bom, agora os reducers não temos ainda, vamos lá e criar. Vou por index do reducers e o que é que eu vou fazer? Eu vou precisar de uma função chamada CombineReducers, então eu vou dar um import, combineReducers fromRedux e vou dar um export default com essa função e o argumento é um objeto. Vou passar um objeto com a chave do nome do reducer e o valor, o reducer, a função do reducer. E agora, até agora não tem nada, mas eu sei que um dos reducers vai ser posts, então eu posso chamar posts e vai ser o postReducer que não temos ainda, então só vou passar uma função de flash que só retorna um objeto vazio. Tá bom? Então eu estou exportando o combineReducers que vai disponibilizar esse posts, esse reducer aqui na verdade é uma função que retorna um objeto vazio agora, mas isso vai ser útil que já vai funcionar quando você passar isso para o createStore aqui no app. Então de volta para o app.js já temos o reducer definido, nem que esteja vazio e adicionei a provider. Então está tudo configurado aqui. Então agora vamos para a list para configurar, conectar o react with redux. Se lembra a gente fez o action creator que a gente vai ter como props, mas ainda não dá porque não está conectado ao redux. Para conectar eu vou importar esse modo, esse função chamado connect from react redux, tá bom? Destrutura o connect que está dentro do react redux. E lá embaixo onde tem o export default eu vou chamar a função connect, export default connect com o argumento aqui sendo o componente e outros argumentos. O senor de que tem dois pares e parantes aqui, tem o último que é para o argumento o componente é sempre no final e esse aqui que vai ser para o map dispatch to props e para o map, oh desculpa, map state to props e para o map dispatch to props. E não temos ainda, mas a gente vai ver se precisa disso. Então o primeiro argumento do connect é o map state to props, o segundo é maps dispatch to props e no outro parante set, no outro parante z é o componente. Sempre assim. Então para que a gente precisa do map state to props ou não? Nesse caso, se a gente quiser disponibilizar os dados dos posts automaticamente via uma prop a gente tem que ter map state to props. E isso que conecta o estado do aplicativo o application state ao react. Agora o map dispatch to props é para você disponibilizar os action creators, por exemplo o fat posts. Então a gente vai precisar do map dispatch porque a gente tem que chamar o action creator chamado fat posts. Tá bom? Normalmente você pode definir essas funções aqui. Map state to props, funções de flash e também define o map dispatch to props, funções de flash aqui. Tá bom? Pode fazer isso. Vamos focar só no map state, vamos focar no dispatch primeiro. Tá bom? Deixa esse cara de lado. O que a gente quer chamar o action creator chamado fat posts? Para fazer isso a gente tem que definir o dispatch to props para disponibilizar o fat posts.