Aprenda a usar Redux

Redux es un administrador de estado que generalmente se usa junto con React, pero no está vinculado a esa biblioteca. Aprenda Redux leyendo esta guía simple y fácil de seguir

Por qué necesitas Redux

Redux es un administrador de estado que generalmente se usa junto con React, pero no está vinculado a esa biblioteca; también se puede usar con otras tecnologías, pero nos ceñiremos a React por el bien de la explicación.

React tiene su propia forma de administrar el estado, como puede leer en laReact Guía para principiantes, donde presento cómo se puede administrar el estado en React.

Mover el estado hacia arriba en el árbol funciona en casos simples, pero en una aplicación compleja puede encontrar que está moviendo casi todo el estado hacia arriba y luego hacia abajo usando accesorios.

React en la versión 16.3.0 introdujo elAPI de contexto, lo que hace que Redux sea redundante para el caso de uso de acceder al estado desde diferentes partes de su aplicación, así que considere usar la API de contexto en lugar de Redux, a menos que necesite una función específica que proporciona Redux.

Redux es una forma de administrar el estado de una aplicación y moverlo a untienda global externa.

Hay algunos conceptos para comprender, pero una vez que lo hace, Redux es un enfoque muy simple para el problema.

Redux es muy popular entre las aplicaciones de React, pero de ninguna manera es exclusivo de React: existen enlaces para casi cualquier framework popular. Dicho esto, haré algunos ejemplos usando React ya que es su caso de uso principal.

¿Cuándo debería utilizar Redux?

Redux es ideal para aplicaciones medianas a grandes, y solo debe usarlo cuando tenga problemas para administrar el estado con la administración de estado predeterminada de React o la otra biblioteca que use.

Las aplicaciones simples no deberían necesitarlo en absoluto (y no hay nada de malo en las aplicaciones simples).

Árbol estatal inmutable

En Redux, todo el estado de la aplicación está representado poruno JavaScriptobjeto, llamadoExpresaroÁrbol del estado.

Lo llamamosÁrbol estatal inmutableporque es de solo lectura: no se puede cambiar directamente.

Solo se puede cambiar enviando unAcción.

Comportamiento

UnAcciónesun objeto JavaScript que describe un cambio de una manera mínima(con solo la información necesaria):

{
  type: 'CLICKED_SIDEBAR'
}

// e.g. with more data { type: ‘SELECTED_USER’, userId: 232 }

El único requisito de un objeto de acción es tener untypepropiedad, cuyo valor suele ser una cadena.

Los tipos de acciones deben ser constantes

En una aplicación simple, un tipo de acción se puede definir como una cadena.

Cuando la aplicación crece es mejor usar constantes:

const ADD_ITEM = 'ADD_ITEM'
const action = { type: ADD_ITEM, title: 'Third item' }

y separar acciones en sus propios archivos e importarlas

import { ADD_ITEM, REMOVE_ITEM } from './actions'

Creadores de acciones

Creadores de accionesson funciones que crean acciones.

function addItem(t) {
  return {
    type: ADD_ITEM,
    title: t
  }
}

Por lo general, ejecuta creadores de acciones en combinación con la activación del despachador:

dispatch(addItem('Milk'))

o definiendo una función de despachador de acciones:

const dispatchAddItem = i => dispatch(addItem(i))
dispatchAddItem('Milk')

Reductores

Cuando se dispara una acción, algo debe suceder, el estado de la aplicación debe cambiar.

Este es el trabajo dereductores.

Que es un reductor

Areductores unfunción puraque calcula el siguiente árbol de estado basado en el árbol de estado anterior y la acción enviada.

;(currentState, action) => newState

Una función pura toma una entrada y devuelve una salida sin cambiar la entrada ni nada más. Así, un reductor devuelve un estado completamente nuevo que sustituye al anterior.

Lo que no debe hacer un reductor

Un reductor debe ser una función pura, por lo que debe:

  • nunca mutes sus argumentos
  • nunca mute el estado, sino cree uno nuevo conObject.assign({}, ...)
  • nunca genere efectos secundarios (no hay llamadas a API que cambien nada)
  • nunca llame a funciones no puras, funciones que cambian su salida en función de factores distintos de su entrada (p. ej.Date.now()oMath.random())

No hay refuerzo, pero debes ceñirte a las reglas.

Reductores múltiples

Dado que el estado de una aplicación compleja puede ser realmente amplio, no hay un solo reductor, sino muchos reductores para cualquier tipo de acción.

Una simulación de un reductor

En esencia, Redux se puede simplificar con este modelo simple:

El estado

{
  list: [
    { title: "First item" },
    { title: "Second item" },
  ],
  title: 'Groceries list'
}

Una lista de acciones

{ type: 'ADD_ITEM', title: 'Third item' }
{ type: 'REMOVE_ITEM', index: 1 }
{ type: 'CHANGE_LIST_TITLE', title: 'Road trip list' }

Un reductor para cada parte del estado.

const title = (state = '', action) => {
    if (action.type === 'CHANGE_LIST_TITLE') {
      return action.title
    } else {
      return state
    }
}

const list = (state = [], action) => { switch (action.type) { case ‘ADD_ITEM’: return state.concat([{ title: action.title }]) case ‘REMOVE_ITEM’: return state.filter(item => action.index !== item.index) default: return state } }

Un reductor para todo el estado

const listManager = (state = {}, action) => {
  return {
    title: title(state.title, action),
    list: list(state.list, action)
  }
}

La tienda

losTiendaes un objeto que:

  • sostiene el estadode la aplicación
  • expone el estadovíagetState()
  • nos permiteactualizar el estadovíadispatch()
  • nos permite (des) registrar unoyente de cambio de estadousandosubscribe()

Una tienda esúnicoen la aplicación.

Así es como se crea una tienda para la aplicación listManager:

import { createStore } from 'redux'
import listManager from './reducers'
let store = createStore(listManager)

¿Puedo inicializar la tienda con datos del lado del servidor?

Por supuesto,solo pasa un estado inicial:

let store = createStore(listManager, preexistingState)

Conseguir el estado

store.getState()

Actualizar el estado

store.dispatch(addItem('Something'))

Escuche los cambios de estado

const unsubscribe = store.subscribe(() =>
  const newState = store.getState()
)

unsubscribe()

Flujo de datos

El flujo de datos en Redux es siempreunidireccional.

Llamadispatch()en la Tienda, pasando una Acción.

La Tienda se encarga de pasar la Acción al Reductor, generando el siguiente Estado.

La tienda actualiza el estado y alerta a todos los oyentes.

Descarga mi gratisReact Handbook


Más tutoriales de react: