20

Redux, tu única fuente de verdad en JavaScript y React.js

24016Puntos

hace 5 años

Redux es el contenedor de estado de nuestras aplicaciones en JavaScript. Nos ayuda a tener una única fuente de la verdad a la cual nuestros componentes se pueden conectar, podemos usar Redux con React, Angular o Vue, no depende de otras librerías de npm.

Imaginemos que el estado de nuestra aplicación es un simple objeto. Por ejemplo una TODO List:

{
  todos: [{
    text: 'Ver el Curso de Redux en Platzi',
    completed: false
  }, {
    text: 'Ayudar a la Comunidad de Platzi con nuevos tips',
    completed: true
  }],
  visibilityFilter: 'SHOW_COMPLETED'
}

Este objeto es un simple “modelo” excepto que no hay setters. Esto es así para que diferentes partes del código no puedan cambiar el estado arbitrariamente, causando errores difíciles de reproducir.

Para cambiar algo en el estado, es necesario enviar una acción. Una acción es un simple objeto en JavaScript que describe lo que sucedió:

{ type: 'ADD_TODO', text: 'Dar me gusta a este blogpost y compartirlo' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }

Hacer valer que cada cambio sea descrito como una acción nos permite tener un claro entendimiento de lo que está pasando en la aplicación. Si algo cambió, sabemos por qué cambió. Las acciones son como migas de pan (el rastro) de lo que ha sucedido. Finalmente, para juntar el estado y las acciones entre sí, escribimos una función llamada reductor (reducer).

El reducer es sólo una función que toma el estado y la acción como argumentos para luego devolver el estado siguiente de la aplicación. Sería difícil escribir tal función para una aplicación grande, por lo que escribimos funciones más pequeñas que gestionan partes del estado:

functionvisibilityFilter(state = 'SHOW_ALL', action) {
  if (action.type === 'SET_VISIBILITY_FILTER') {
    return action.filter;
  } else {
    return state;
  }
}

functiontodos(state = [], action) {
  switch (action.type) {
  case'ADD_TODO':
    return state.concat([{ text: action.text, completed: false }]);
  case'TOGGLE_TODO':
    return state.map((todo, index) =>
      action.index === index ?
        { text: todo.text, completed: !todo.completed } :
        todo
   )
  default:
    return state;
  }
}

Y escribimos otro reducer que gestiona el estado completo de nuestra aplicación llamando a esos dos reducers por sus respectivas state keys:

functiontodoApp(state = {}, action) {
  return {
    todos: todos(state.todos, action),
    visibilityFilter: visibilityFilter(state.visibilityFilter, action)
  };
}

Básicamente esta es la idea de Redux:

Tener una única fuente de la verdad en la cual el estado lo manejemos a través de reducers que serán cambiados cuando se ejecute un action.

¿Has estado haciendo una aplicación que maneja autenticación de usuarios, token persist, GET, POST, PUT, DELETE y no sabes como interconectarlo todo? Redux es la solución, entra ya al Curso de Redux por Bedu y haz que miles de componentes se conecten a un único estado y tu aplicación sea mucho más rápida en performance.

#NuncaParesDeAprender 💪 🤓

Daniel
Daniel
danestves

24016Puntos

hace 5 años

Todas sus entradas
Escribe tu comentario
+ 2
5
11382Puntos

Gracias Daniel por compartir el articulo, me quedo esencialmente con lo siguiente:

  1. El concepto, la razón de ser de Redux: que consiste en tener una unica fuente de datos de verdad

  2. Redux se maneja a través de funciones reducers() , que reciben por argumento el state y la acción modificadora action