A representação simples do fluxo de dados do Redux é:

User interaction dispatches an action --> The reducer updates the state based on the action --> Subscribed components update the UI based on the new state.

Vamos considerar o seguinte aplicativo:

Este é apenas um exemplo limpo de um aplicativo baseado em redux. Existe apenas um componente simples que está conectado ao ciclo redux ( Counter ). Temos dois botões dentro: incrementar e decrementar . Como você provavelmente já adivinhou - esses botões aumentarão ou diminuirão o valor do contador .

Agora vamos descobrir quais objetos e funções precisamos para construir o Redux do zero: — createStore , combineReducers , connect e Provider .

createStore

Uma árvore de objetos imutável e mantém o estado do aplicativo. createStore(reducer, state, enhancer): createStoreaceita reducer, statee enhancercomo entradas e produz um storeobjeto.

• getState(): obter o estado da loja
• dispatch(action): use reducerpara obter novo statee notificar cada ouvinte sobre a mudança de estado.
• subscribe(listener): nos permite adicionar um ouvinte aostore

A combineReducersfunção auxiliar transforma um objeto cujos valores são funções de redução diferentes em uma única função de redução para a qual você pode passar createStore.É apenas uma função de utilidade para combinar vários redutores em um e economizar tempo para algum código clichê. Sua função é substituir o seguinte trecho:

export default function todoApp(state = {}, action) {
  return {
    filter: filter(state.filter, action),
    todos: todos(state.todos, action)
  }
}
with:
const todoApp = combineReducers({
  filter,
  todos
});

function combineReducers(obj) {  
  return (state = {}, action) => {
    const newState = {};
    for (let key in obj) {
      newState[key] = obj[key](state[key], action);
    }
    return newState;
  }
}
    
      

A connect()função conecta um componente React a um repositório Redux.

• Ele fornece ao seu componente conectado as partes dos dados de que precisa da loja e as funções que pode usar para despachar ações para a loja.
• Ele não modifica a classe do componente passada para ele; em vez disso, ele retorna uma nova classe de componente conectada que envolve o componente que você passou.

O <Provider />torna o Redux storedisponível para qualquer componente aninhado que tenha sido encapsulado na connect()função.

• Como qualquer componente React em um aplicativo React-Redux pode ser conectado, a maioria dos aplicativos renderizará um <Provider>no nível superior, com toda a árvore de componentes do aplicativo dentro do Provider.
• Para implementá-lo, podemos usar a nova API de contexto . Assim, o Provedor se torna realmente simples. A única coisa que precisamos fazer é usar essa API e passar a loja :

Conclusão

Cobrimos os objetos e funções básicos que precisamos para construir o Redux do zero. Espero que você tenha achado isso útil.

Obrigado por ler :)