Redux - biblioteca JavaScript

O que é Redux?

• Redux é um contêiner de estado previsível projetado para ajudá-lo a escrever aplicativos JavaScript que se comportam de forma consistente em clientes, servidores e ambientes nativos e são fáceis de testar.
• Redux foi criado por Dan Abramov por volta de junho de 2015. Ele foi inspirado no Flux do Facebook e na linguagem de programação funcional Elm. Redux se popularizou muito rapidamente por causa de sua simplicidade , tamanho pequeno (apenas 2 KB) e ótima documentação .

A previsibilidade do Redux é determinada pelos três princípios mais importantes, conforme abaixo -

1. Fonte Única da Verdade - O estado de todo o seu aplicativo é armazenado em uma árvore de objetos dentro de um único armazenamento . Como todo o estado do aplicativo é armazenado em uma única árvore, isso torna a depuração fácil e o desenvolvimento mais rápido.
2. O estado é somente leitura - A única maneira de alterar o estado é emitir uma ação , um objeto que descreve o que aconteceu. Isso significa que ninguém pode alterar diretamente o estado do seu aplicativo.
3. As alterações são feitas com funções puras - para especificar como a árvore de estado é transformada por ações, você escreve redutores puros . Um redutor é um local central onde ocorre a modificação de estado. Um redutor é uma função que obtém o estado atual e a ação a ser executada. A função deve retornar um estado recém-atualizado, não uma versão modificada do estado existente .

Redux tem três partes de construção: ações , loja e redutores .

Ações em Redux

Em suma, ações são eventos . Eles são a única forma de enviar dados de seu aplicativo para sua loja Redux. Os dados podem ser de interações do usuário, eventos internos, como chamadas de API ou até mesmo envios de formulários.

• Ações são objetos JavaScript simples e devem ter uma propriedade type (geralmente constante) para indicar o tipo de ação a ser executada. Eles também devem ter uma carga útil que contenha as informações que devem ser trabalhadas pela ação.

{ 
  type: "LOGIN",
  payload: {
    username: "Ayush",
    password: "12345"
  }
}

const setLoginStatus = (name, password) => {
  return {
    type: "LOGIN",
    payload: {
      username: "Ayush",
      password: "12345"
    }
  }
}

store.dispatch(setLoginStatus(name, password));

• É o único lugar onde você pode escrever lógica e cálculos. A função redutora aceitará o estado anterior do aplicativo e da ação despachada, calculará o próximo estado e retornará o novo objeto.
• As seguintes coisas nunca devem ser realizadas dentro do redutor −Mutação de argumentos de funções, chamadas de API e lógica de roteamento e Chamada de função não pura, por exemplo, Math.random ()
• É baseado na reducefunção em JavaScript, onde um único valor é calculado a partir de vários valores após a execução de uma função de retorno de chamada.

Redux reducer signature
(previousState, action) => nextState
Array.prototype.reduce signature
(accumulator, value) => (accumulator + value)
Example:
const handleAuth = (state = initialState, action) => {
    switch (action.type) {

      // This reducer handles any action with type "LOGIN"
      case "LOGIN":
          return state.map(user => {
              if (user.username !== action.payload.username) {
                  return user;
              }

              if (user.password == action.payload.password) {
                  return {
                      ...user,
                      login_status: "LOGGED IN"
                  }
              }
          });
        default:
          return state;
      } 
};

• Para aplicativos mais complexos, usar o combineReducers()utilitário fornecido pelo Redux é possível (na verdade, recomendado). Ele combina todos os redutores do aplicativo em um único redutor de índice. Cada redutor é responsável por sua própria parte do estado do aplicativo, e o parâmetro de estado é diferente para cada redutor. O combineReducers()utilitário torna a estrutura do arquivo muito mais fácil de manter.

const rootReducer = combineReducers({
    handleAuth: handleAuth,
    editProfile: editProfile,
    changePassword: changePassword
});

• Permite acesso ao estado via getState();
• Permite que o estado seja atualizado via dispatch(action);
• Registra ouvintes via subscribe(listener);
• Lida com o cancelamento do registro de ouvintes por meio da função retornada por subscribe(listener).
• createStore - a função pode ter três argumentos. Um redutor é uma função que retorna o próximo estado do aplicativo. Um preloadedState é um argumento opcional e é o estado inicial do seu aplicativo. Um realçador também é um argumento opcional. Isso o ajudará a aprimorar a loja com recursos de terceiros.

Syntax - createStore(reducer, [preloadedState], [enhancer])
Example:
import { createStore } from ‘redux’;
import rootReducer from './reducers/index';
const store = createStore(rootReducer);

store.dispatch(setLoginStatus(‘alex’, ‘123456’));

• O próprio Redux é síncrono, então como as operações assíncronas , como solicitações de rede, funcionam com o Redux? Aqui, os middlewares são úteis.

• Conforme discutido anteriormente, os redutores são o local onde toda a lógica de execução é escrita. O redutor não tem nada a ver com quem o executa, quanto tempo está levando ou registrando o estado do aplicativo antes e depois que a ação é despachada. Nesse caso, a função de middleware Redux fornece um meio para interagir com a ação despachada antes que cheguem ao redutor.
• Normalmente, middlewares são usados ​​para lidar com ações assíncronas em seu aplicativo. Redux fornece uma API chamada applyMiddleware que nos permite usar middleware customizado, bem como middlewares Redux como redux-thunk e redux-saga . E isso pode ser aplicado à loja da seguinte forma -

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';
const store = createStore(rootReducer, applyMiddleware(thunk));

function getUser() {
   return function() {
      return axios.get('/get_user_details');
   };
}

Syntax - ({ getState, dispatch }) => next => action
function simpleMiddleware({ getState, dispatch }) {
  return function(next){
    return function(action){
      // processing
      const nextAction = next(action);
      // read the next state
      const state = getState();
      // return the next action or you can dispatch any other action
      return nextAction;  
    }
  }
}
const store = createStore(rootReducer , initialState=[ ] , applyMiddleware(simpleMiddleware));

• Previsibilidade do resultado - há sempre uma fonte de verdade, o armazenamento, sem confusão sobre como sincronizar o estado atual com ações e outras partes do aplicativo.
• Capacidade de manutenção - ter um resultado previsível e uma estrutura rígida torna o código mais fácil de manter. Isso também ajuda a segregar sua lógica de negócios de sua árvore de componentes. Para aplicativos de grande escala, é fundamental manter seu aplicativo mais previsível e sustentável.
• Organização - Redux é mais rígido sobre como o código deve ser organizado, o que torna o código mais consistente e fácil para uma equipe trabalhar.
• Renderização do servidor - Isso é muito útil, especialmente para a renderização inicial, contribuindo para uma melhor experiência do usuário ou otimização do mecanismo de busca. Basta passar a loja criada no servidor para o lado do cliente.
• Ferramentas do desenvolvedor - os desenvolvedores podem rastrear tudo que está acontecendo no aplicativo em tempo real, desde ações até mudanças de estado. Ele oferece edição de código ao vivo combinada com um depurador que viaja no tempo.
• Comunidade e ecossistema - Isso é uma grande vantagem sempre que você está aprendendo ou usando qualquer biblioteca ou estrutura. Ter uma comunidade por trás do Redux o torna ainda mais atraente de usar.
• Facilidade de teste - A primeira regra para escrever código testável é escrever pequenas funções que fazem apenas uma coisa e são independentes. O código do Redux é composto principalmente de funções que são apenas isso: pequenas, puras e isoladas.
• Benefícios de desempenho - você pode presumir que manter o estado do aplicativo global resultaria em alguma degradação do desempenho. Em grande medida, não é esse o caso. O React Redux implementa muitas otimizações de desempenho internamente, de forma que seu próprio componente conectado apenas processe novamente quando realmente precisa.

• Uma etapa útil final para trabalhar com Redux é instalar e iniciar as próprias ferramentas de desenvolvimento do Redux. Se estiver usando o Chrome, você pode habilitar Redux DevTools seguindo o link abaixo:
• Mas há mais uma etapa para fazê-lo funcionar. Em nosso createStoremétodo, precisamos passar a seguir como um argumento depois do nosso redutor: window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()(). Com essa adição, store.jsdeve ficar assim:

import { createStore } from 'redux';
import reducer from './reducers';
const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
export default store;