Introducción a Redux (Acción, Reductores y Tienda)

Redux es una biblioteca de gestión de estado utilizada en aplicaciones de JavaScript. Simplemente administra el estado de su aplicación o, en otras palabras, se utiliza para administrar los datos de la aplicación. Se usa con una biblioteca como React.
Usos: facilita la gestión del estado y los datos. A medida que aumenta la complejidad de nuestra aplicación. Al principio, es difícil de entender, pero realmente ayuda a crear aplicaciones complejas. Al principio, se siente como mucho trabajo, pero es realmente útil.
Antes de sumergirnos en Redux, debemos conocer algunos principios importantes de redux. Hay tres principios de Redux estos son: 
 

• Fuente única de la verdad: ayuda a crear aplicaciones universales. El estado de la aplicación se almacena en un árbol de objetos llamado store . Significa una aplicación, una tienda.
• El estado es de solo lectura (inmutabilidad): significa que no cambiamos el objeto de estado y sus propiedades directamente. En lugar de esto, cree un nuevo objeto, vuelva a calcular el nuevo estado de la aplicación y actualícelo con nuestro objeto recién creado. Y esto es importante porque todos los cambios están ocurriendo en el mismo lugar, por lo que todo debe hacerse en estricto orden y uno por uno.
• Los cambios se realizan con funciones puras (reductores): Los reductores son funciones puras que toman el estado anterior y la acción (discutir más adelante) y devuelven el nuevo estado.

Partes de construcción de redux: 
 

1. Acción
2. reductor
3. Tienda

Flujo de datos redux

Acciones: las acciones son un objeto JavaScript simple que contiene información. Las acciones son la única fuente de información para la tienda. Las acciones tienen un campo de tipo que indica qué tipo de acción realizar y todos los demás campos contienen información o datos. Y hay otro término llamado Creadores de acciones , estas son las funciones que crean acciones. Entonces, las acciones son la información (Objetos) y el creador de acciones son funciones que devuelven estas acciones.
Ejemplo: El ejemplo más fácil que podemos probar es To-do. Entonces, crearemos dos creadores de acciones, uno para agregar una tarea en tareas pendientes y para eliminar.
 

function addTask(task) {
   
  return {
     
    type: 'ADD_TODO',
    task: task
  }
}
 
function removeTask(task) {
  
  return {
    type: 'REMOVE_TODO',
    task: task
  }
}

Entonces, las dos funciones anteriores son creadores de acciones. Uno es para agregar una tarea y otro para eliminar, y vea que ambos tienen un tipo que indica cuál es el propósito del creador de acciones y se usarán con reductores.
Reductores: como ya sabemos, las acciones solo dicen qué hacer, pero no dicen cómo hacerlo, por lo que los reductores son las funciones puras que toman el estado actual y la acción y devuelven el nuevo estado y le dicen a la tienda cómo hacerlo.
Vamos a crear un reductor para nuestro TO-do. 
Ejemplo: 
 

function task(tasks = [], action) {
   
  if (action.type === 'ADD_TODO') {
    return [...tasks, action.task];
  } else if (action.type === 'REMOVE_TODO') {
      return tasks.filter(task => task !== action.task);
    }
  return tasks;
}

Entonces, en el reductor anterior, una función creada con dos argumentos primero es el estado actual y luego la acción que queremos realizar. Primero inicialice la array vacía del estado actual porque la primera lista de tareas estará vacía. 
Luego verifique el tipo de acción, diferentes tipos de acciones tendrán una funcionalidad diferente. En el caso anterior, si se agrega la tarea, devuelve la array que contiene la lista anterior de tareas y con una nueva agregada, pero el estado anterior no va a mutar el anterior Estado vamos a devolver uno nuevo, esto es necesario tenerlo en cuenta. Lo mismo para eliminar, si ninguno de los dos anteriores, simplemente devuelva la lista. Devuelva el nuevo estado, nunca mute el estado anterior. 
Para aplicaciones más complejas, use combineReducers() para combinarlas de modo que pueda pasar a la tienda.
Tienda:La tienda es el objeto que contiene el estado de la aplicación.
Funciones asociadas a Tienda: 
 

• createStore() – Para crear una tienda
• despacho (acción) -Para cambiar el estado
• getState(): para obtener el estado actual de la tienda.

Ejemplo: Vamos a crear una tienda para nuestro TO-do. 
 

import { createStore } from 'Redux';
 
// Creating store
const store = createStore(taskList);
 
// Here add is action as you can see console,
// its an object with some info
const add = addTask('Wake up');
console.log(add);
 
// Dispatch usually trigger reducer and perform task
store.dispatch(add);
 
// getState() function is used to get current state
console.log(store.getState());
 
store.dispatch(addTask('Study'));
store.dispatch(addTask('Eat'));
store.dispatch(addTask('Go to sleep'));
store.dispatch(removeTask('Eat'));
store.dispatch(addTask('Work'));
store.dispatch(addTask('Sleep'));
store.dispatch(removeTask('Sleep'));
 
console.log(store.getState());