Categorias
Estudos

57 coisas que aprendi sobre Redux com o freeCodeCamp

tl:dr: Já faz cerca de 3 meses desde o meu último post, nesse meio tempo aprendi Redux, estudei mais sobre React entre outras tecnologias.

Redux até agora parece “estranho”, sério, ainda não consegui entender bem o propósito da tecnologia, mas acho também que é falta de um app maior onde os benefícios se mostrem melhor.

Mesmo na comunidade em geral várias pessoas, até mesmo o Dan Abramov (criador do React), diz que “Talvez você não precise de Redux”.

A tecnologia é interessante, estudarei mais, mas também preciso focar em continuar os estudos em outros tópicos.


Redux: O que é Redux?

Redux é um contêiner de estado previsível.

Redux: O que é uma Store?

É um objeto responsável pelo estado da aplicação inteira.

Redux: Como se altera o estado de um app?

Usando a store.

Redux: Qual método cria uma store?

Redux.createStore();

Redux: O que createStore() recebe como argumento?

Um reducer.

Redux: Como se pega o state de uma store?

store.getState();

Redux: Em Redux, todos as alterações de estado são feitas através do envio (dispatch) de ações.


Redux: O que é uma action?

Um objeto que contêm informações sobre uma ação que ocorreu.

Redux: Qual propriedade é requerida em uma action?

type

Redux: O que é usado para criar uma Ação?

Um Action Creator.

Redux: O que é um Action Creator?

Uma função que retorna uma ação.

Redux: Qual método é usada para enviar actions para a store?

store.dispatch()

Redux: O que se deve passar para store.dispatch()?

Um Action Creator.

Redux: Faça o dispatch do método loginAction.

store.dispatch(loginAction());

Redux: Depois que uma ação é criada e despachada a store precisa saber como responder a esse ação.


Redux: Reducers são responsáveis pelas alterações de estado em resposta as ações.


Redux: O que um reducer recebe como argumentos?

state e action

Redux: O que um reducer retorna?

Um novo estado.

Redux: Action Types devem ser consts.


Redux: Como se adiciona uma função listener sempre que um despacho for executado?

store.subscribe();

Redux: O que store.subscribe() recebe como parâmetro?

Um listener.

Redux: Qual método combina múltiplos reducers?

Redux.combineReducers()

Redux: O que Redux.combineReducers() aceita como argumento?

Um objeto que contêm todos os reducers.

Redux: O que é Redux Thunk?

É um middleware que permite a escrita de Action Creators que retornem funções ao invés de ações.

Redux: Qual função aplica um middleware?

Redux.applyMiddleware();

Redux: Onde se faz a chamada de Redux.applyMiddleware()?

No segundo parâmetro de Redux.createStore();

Redux: Como se cria uma action assíncrona?

No Action Creator, se retorna uma função que recebe o dispatch como argumento.

Redux: Dentro de uma action assíncrona você pode fazer despachos e requisições assíncronas.


Redux: É comum despachar uma ação antes de iniciar um comportamento assíncrono para que o estado da sua aplicação saiba que algum tipo de dado está sendo requisitado.


Redux: Quando se recebe dados de uma requisição assíncrona, você despacha uma action que leva os dados recebidos junto com a informação que a ação foi terminada.


Redux: Faça a chamada a Redux.applyMiddleware() ativando o middleware Redux Thunk?

Redux.applyMiddleware(ReduxThunk.default);

Redux: Crie uma store com o reducer “reducer” e aplicando o middleware Redux Thunk.

Redux.createStore(reducer, Redux.applyMiddleware(ReduxThunk.default));

JavaScript: Como se faz uma cópia rasa de um objeto “obj”?

Object.assign({}, obj);

Redux: Em um app React Redux, você cria uma única Redux Store que administra o estado do seu app.


Redux: Seus componentes React se inscrevem apenas nos pedaços de dados da store que são relevantes ao componente.


Redux: Você despacha ações direto dos componentes React para atualizar a Store.


Redux: Qual pacote é necessário para o Redux funcionar com o React?

react-redux

Redux: O que é o <Provider>?

É o wrapper que permite você acessar a Redux Store e o dispatch

Redux: Quais duas props <Provider> aceita?

A Store e os componentes filhos.

Redux: Como se instancia o elemento <Provider>?

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

Redux: Qual componente você coloca dentro de <Provider>?

<App />

Redux: O componente <Provider> permite você ter state e dispatch nos seus componentes React.


Redux: O que mapStateToProps() faz?

Ele recebe o state e retorna um objeto que mapeia o state para props especificas.

Redux: O que mapStateToProps() recebe como parâmetro?

state

Redux: O que mapDispatchToProps() faz?

Ela recebe dispatch e retorna um objeto que mapeia action creators para props especificas.

Redux: O que é retornado por cada propriedade em mapDispatchToProps()?

Cada propriedade retorna uma função que chama dispatch() no Action Creator com os dados da ação.

Redux: Depois de criar mapStateToProps() e mapDispatchToProps() como você conecta essas função a um componente “Presentational” do seu app?

connect(mapStateToProps, mapDispatchToProps)(Presentational)

Redux: O que são Presentational Components?

São componentes responsáveis pela apresentação da UI, e fazem isso através das props que recebem.

Redux: O que são Container Components?

São componentes responsáveis por despachar ações para a Store e passar Store State como props para componentes filhos.

Redux: Presentational Components se conectam diretamente ao Redux?

Não.

Redux: Container Components são conectados ao Redux?

Sim.

React: Importe React do seu módulo.

import React from 'react';

React: Importe ReactDOM do seu módulo.

import ReactDOM from 'react-dom';

Redux: Importe Provider e connect do módulo react-redux.

import { Provider, connect } from 'react-redux';

Redux: Importe createStore, combineReducers e applyMiddleware do módulo redux.

import { createStore, combineReducers, applyMiddleware } from 'redux';

React: O que <React.Fragment> faz?

Ele permite que você encapsule componentes a serem retornados, sem adicionar um novo nó ao DOM.

React: Como se exporta um componente TodoItem para ser usado em outro local?

export default TodoItem;

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *