anteriorpróximo
Aula 04
Cursos / Autenticação com o Firebase, React Native & Redux
Instalação do Redux e a Definição do Reducer Inicial

Summary

# Resumo da Configuração do Redux

O próximo passo na configuração do projeto é instalar e configurar o Redux. 

## Instalação do Redux

1. **Abrir o terminal** e limpar a tela.
2. **Instalar Redux**:
   ```bash
   npm install --save redux
  1. Verificar se o Redux foi adicionado ao package.json. A versão instalada é 3.6.
  2. Instalar React-Redux: 
    npm install --save react-redux
  3. Verificar package.json novamente; a versão do React-Redux instalada é 4.4.6.

Estrutura do Projeto

  1. Navegar para a pasta src e criar os seguintes diretórios:

    • components
    • actions
    • reducers

  2. Criar arquivos index.js dentro das pastas actions e reducers.

Configuração de Reducers

  1. Importar combineReducers do Redux no arquivo reducers/index.js.

  2. Criar um reducer inicial:

    import { combineReducers } from 'redux';

const rootReducer = combineReducers({
    // reducers will be added here
});

export default rootReducer;
    • O reducer deve ser uma função que recebe state e action.

  3. Estrutura básica do reducer:

    const initialState = {}; // Valor inicial do estado.

const exampleReducer = (state = initialState, action) => {
    return state; // Retorna o estado atual.
};

Criar a Store

  1. Importar createStore do Redux:

    import { createStore } from 'redux';

  2. Criar a store:

    const store = createStore(
    rootReducer // Passar o rootReducer
);

Conectar Redux ao React

  1. Importar o Provider do React-Redux:

    import { Provider } from 'react-redux';

  2. Envolver o componente principal com Provider:

    <Provider store={store}>
    <App />
</Provider>

Agora o aplicativo React está conectado ao Redux, permitindo o acesso ao estado da aplicação através do Redux em toda a aplicação.

Teste

  • O aplicativo foi testado em simuladores de iPhone e Android, e tudo funcionou corretamente.
Scroll down above for more

Video Transcript

Agora o próximo passo na nova configuração é configurar o Redux. Primeiro eu vou para o terminal, deixo limpar a tela. O que eu vou fazer? Vou desalar o Redux. Vou dar npm, install e vou dar dash dash save, porque eu quero salvar com dependência no package.json. Vou salvar o Redux. Então vai demorar um pouquinho para assalar o Redux. Deixa eu só checar o package.json para verificar se adicionou as dependências aqui. Vou dar um package.json aqui. Você nota que o Redux foi adicionado as dependências. Note que é a versão 3.6. Depois disso também vou precisar do react-redux para poder conectar o react com o Redux. Vamos instalar outro modo. Dash dash save react-redux. Vamos ver. Demora um pouquinho. Vamos verificar o package.json. Vai já aparecer o react-redux. Vê se for 4.4.6. Estou usando aqui. Então instalamos os módulos, o Redux, o react-redux. Estamos preparados para começar a configurar. Primeira coisa que vou fazer, vou para pasta src e criar outras pastas. Criar diretórios chamados components para botar todos os nossos componentes lá. Vou criar também actions para pôr nossas ações. Desculpa, criei um arquivo, é o diretório. Criar um diretório, new folder, novo diretório, nova pasta, actions. E também o reducers. Pasta chamada reducers para pôr nossos reducers lá. Dentro do actions, vou criar index.js para pôr nossos action creators. Dentro reducers, também vou botar index.js. Agora para reducers, vou digitar um código para inicializar todos os reducers. Então, primeiro vamos importar combine reducers, que é uma parte do módulo do redux. Esse cara vai ser usado para combinar todos os reducers, porque a gente vai ter vários reducers, então no final a gente vai combinar todos os reducers em um. Só um. Então import, vamos dar um export default e vamos chamar combine reducers. Aqui a gente vai passar um object como argumento. E vai ser alguma coisa, vai ser os reducers aqui, mas agora a gente não tem nada. Então só vou botar state aqui e vou botar uma função de flash aqui e retorno um objeto vazio. Tá bom? Nesse caso o reducer é uma função, né? A função do reducer sempre tem o argumento state e o... também tem action. Nesse caso vou botar inicialmente, vou iniciar o state, o objeto vazio e em vez de retornar o objeto vazio, vou retornar o state. Nesse caso, se você não entende isso aqui, deixa eu copiar aqui. Esse aqui é a mesma coisa que digitar isso aqui. Function, state, action. Tá bom? A mesma coisa. Nesse caso eu estou definindo um valor inicial para o state. Tá bom? Inicialmente o state vai ser esse cara, vai ser objeto vazio que vai ser passado aqui, na verdade inicialmente vai ser assim. Tá bom? Se lembre que o reducer é sempre uma função que retorna parte ou uma peça do estado, do application state. Então, vamos deixar isso aqui, só para configurar. Deixar configurado tudo ok. E depois a gente vai modificar para adicionar os nossos reducers. Agora, vamos voltar a um app aqui. Agora não tem nada configurado para o redux. Então a gente tem que usar umas coisas. Primeiro de tudo a gente tem que criar uma store, né? O chamado redux store. Para isso a gente vai precisar da função create store que está dentro do modelo do redux. Então o que é que eu vou fazer? Vou aqui, depois desse import aqui, vou dar um import. Destruturado do create store que está dentro do modelo redux. Tá bom? E com isso eu posso criar uma store. Vamos aqui, vou dar const, criar um variável chamado store e vamos criar o store. Cadê? Create store. Não é? Mas quando a gente cria store tem que passar os reducers. Agora não tem um reducer, vamos chamar de reducers e vamos definir. Então, onde é que está os reducers? Está dentro da pasta reducers no index.js. Então vou importar reducers, que eu chamei reducers aqui. Então tem que ser o mesmo nome. From, onde é que está? Tá dentro da pasta reducers, então mesmo direitório. Reducers. Como o nome do arquivo é index, não precisa digitar, tá bom? É só falar assim, que vai automaticamente saber que tem que olhar no index. Então vou olhar nesse arquivo, vai importar esse cara aqui. Tá bom? E vai ser aplicado a essa store. Tá ok? Agora, o próximo passo é usar o componente de auto-ordem, Higher Order Component chamado Provider, que é fornecido pelo model do React Redux. Que ele model que vai permitir a gente conectar o Redux, o React ao Redux, né? Então vamos lá. Depois desse Great Store, vou importar o quê? Provider do React Redux, tá bom? Então esse componente aqui chamado Higher Order Component, H-O-C, conectar até ordem, sei lá como é que fala em português. Vai aprimorar o nosso componente, tá bom? Pra injetar a store com propriedade. Então vamos lá. A gente vai fazer o quê? Vai mudar esse cara aqui, vai mudar o provider aqui. E o provider vai ser o cara, né? Vai dominar tudo, então tem que ter esses caras aqui com o filho do provider. E a propriedade do provider é chamada Store. A gente tem que passar a Store. Como a gente criou uma Store aqui e chamou de Store também, a gente só passa esse cara aqui. Esse cara aqui é esse cara aqui. Tá bom? Passou a Store para o provider e agora o nosso aplicativo vai ter o Application State to Redux disponível por toda a aplicação, todo aplicativo, né? Vamos salvar aqui. Vou testar. Deixei o meu simulador iPhone. A atualizar, tudo ok? Não teve erro. Também vou no Android só para você ver. RR aqui. Tudo ok. Deixa eu só abrir meu debugger aqui. Debug de S Remotely, só para ver se não teve nada. Tudo ok também. Então vamos lá. Volta. Tá bom?
See more
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação:
Quero contribuir