Redux - funções puras

Uma função é um processo que recebe entradas chamadas de argumentos e produz alguma saída conhecida como valor de retorno. Uma função é chamada pura se obedecer às seguintes regras -

Uma função retorna o mesmo resultado para os mesmos argumentos.
Sua avaliação não tem efeitos colaterais, ou seja, não altera os dados de entrada.
Sem mutação de variáveis locais e globais.
Não depende do estado externo como uma variável global.

Tomemos o exemplo de uma função que retorna duas vezes o valor passado como uma entrada para a função. Em geral, é escrito como f (x) => x * 2. Se uma função for chamada com um valor de argumento 2, a saída seria 4, f (2) => 4.

Vamos escrever a definição da função em JavaScript conforme mostrado abaixo -

const double = x => x*2; // es6 arrow function
console.log(double(2));  // 4

Here, double is a pure function.

De acordo com os três princípios no Redux, as alterações devem ser feitas por uma função pura, ou seja, redutor no Redux. Agora, surge uma questão de por que um redutor deve ser uma função pura.

Suponha que você deseja despachar uma ação cujo tipo é 'ADD_TO_CART_SUCCESS' para adicionar um item ao seu aplicativo de carrinho de compras clicando no botão adicionar ao carrinho.

Vamos supor que o redutor está adicionando um item ao seu carrinho conforme mostrado abaixo -

const initialState = {
   isAddedToCart: false;
}
const addToCartReducer = (state = initialState, action) => { //es6 arrow function
   switch (action.type) {
      case 'ADD_TO_CART_SUCCESS' :
         state.isAddedToCart = !state.isAddedToCart; //original object altered
         return state;
      default:
         return state;
   }
}
export default addToCartReducer ;

Vamos supor, isAddedToCart é uma propriedade no objeto de estado que permite a você decidir quando desabilitar o botão 'adicionar ao carrinho' para o item retornando um valor booleano ‘true or false’. Isso evita que o usuário adicione o mesmo produto várias vezes. Agora, em vez de retornar um novo objeto, estamos alterando a prop isAddedToCart no estado como acima. Agora, se tentarmos adicionar um item ao carrinho, nada acontece. O botão Adicionar ao carrinho não será desativado.

A razão para este comportamento é a seguinte -

Redux compara objetos novos e antigos pela localização de memória de ambos os objetos. Ele espera um novo objeto do redutor se alguma alteração tiver ocorrido. E também espera obter o objeto antigo de volta se nenhuma mudança ocorrer. Nesse caso, é o mesmo. Por este motivo, Redux assume que nada aconteceu.

Portanto, é necessário que um redutor seja uma função pura no Redux. A seguir está uma maneira de escrever sem mutação -

const initialState = {
   isAddedToCart: false;
}
const addToCartReducer = (state = initialState, action) => { //es6 arrow function
   switch (action.type) {
      case 'ADD_TO_CART_SUCCESS' :
         return {
            ...state,
            isAddedToCart: !state.isAddedToCart
         }
      default:
         return state;
   }
}
export default addToCartReducer;