Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Conceptos básicos

Imagina que el estado de tu aplicación se describe como un objeto simple. Por ejemplo, el estado de una app de tareas podría verse así:

{
  todos: [{
    text: 'Eat food',
    completed: true
  }, {
    text: 'Exercise',
    completed: false
  }],
  visibilityFilter: 'SHOW_COMPLETED'
}

Este objeto actúa como un "modelo" pero sin métodos setter. Esto evita que distintas partes del código modifiquen el estado arbitrariamente, lo que causaría errores difíciles de reproducir.

Para cambiar algo en el estado, necesitas despachar una acción. Una acción es un objeto JavaScript simple (¿notas que no introducimos magia?) que describe qué ocurrió. Algunos ejemplos de acciones:

{ type: 'ADD_TODO', text: 'Go to swimming pool' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }

Al forzar que cada cambio se describa como una acción, entendemos claramente qué sucede en la app. Si algo cambia, sabemos por qué cambió. Las acciones son como migas de pan que rastrean lo ocurrido. Finalmente, para unir estado y acciones, escribimos una función llamada reductor. Nuevamente, nada mágico: es solo una función que toma estado y acción como argumentos, y devuelve el siguiente estado de la aplicación. Sería difícil escribir una función así para apps grandes, así que creamos funciones más pequeñas que gestionan partes del estado:

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

function todos(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 reductor que gestiona el estado completo llamando a estos dos reductores para las claves de estado correspondientes:

function todoApp(state = {}, action) {
  return {
    todos: todos(state.todos, action),
    visibilityFilter: visibilityFilter(state.visibilityFilter, action)
  }
}

Esta es esencialmente toda la idea de Redux. Fíjate que no hemos usado ninguna API de Redux. Incluye algunas utilidades para facilitar este patrón, pero el concepto central es describir cómo tu estado se actualiza en el tiempo en respuesta a objetos de acción. El 90% de tu código será JavaScript estándar, sin usar Redux en sí mismo, sus APIs ni magia alguna.