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?
typeRedux: 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-reduxRedux: 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?
stateRedux: 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;