Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →
Tres principios
Redux puede describirse mediante tres principios fundamentales:
Única fuente de la verdad
El estado global de tu aplicación se almacena en un árbol de objetos dentro de un único store.
Esto facilita crear aplicaciones universales, ya que el estado de tu servidor puede serializarse e hidratarse en el cliente sin esfuerzo adicional de codificación. Un único árbol de estado también simplifica la depuración o inspección de aplicaciones; además, permite persistir el estado de tu app durante el desarrollo para acelerar el ciclo de desarrollo. Funcionalidades tradicionalmente complejas de implementar -como Deshacer/Rehacer- pueden volverse triviales cuando todo tu estado se almacena en un único árbol.
console.log(store.getState())
/* Prints
{
visibilityFilter: 'SHOW_ALL',
todos: [
{
text: 'Consider using Redux',
completed: true,
},
{
text: 'Keep all state in a single tree',
completed: false
}
]
}
*/
El estado es de solo lectura
La única forma de cambiar el estado es emitir una action, un objeto que describe lo ocurrido.
Esto garantiza que ni las vistas ni los callbacks de red escribirán directamente en el estado. En su lugar, expresan una intención de transformar el estado. Como todos los cambios están centralizados y ocurren secuencialmente en orden estricto, no existen condiciones de carrera sutiles que vigilar. Al ser las actions meros objetos planos, pueden registrarse, serializarse, almacenarse y reproducirse posteriormente para depuración o pruebas.
store.dispatch({
type: 'COMPLETE_TODO',
index: 1
})
store.dispatch({
type: 'SET_VISIBILITY_FILTER',
filter: 'SHOW_COMPLETED'
})
Los cambios se realizan con funciones puras
Para especificar cómo se transforma el árbol de estado mediante actions, escribes reducers puros.
Los reducers son simplemente funciones puras que toman el estado anterior y una action, y devuelven el siguiente estado. Recuerda devolver nuevos objetos de estado en lugar de mutar el estado anterior. Puedes comenzar con un único reducer, y a medida que tu app crece, dividirlo en reducers más pequeños que gestionen partes específicas del árbol de estado. Como los reducers son solo funciones, puedes controlar su orden de ejecución, pasar datos adicionales o incluso crear reducers reutilizables para tareas comunes como paginación.
function visibilityFilter(state = 'SHOW_ALL', action) {
switch (action.type) {
case 'SET_VISIBILITY_FILTER':
return action.filter
default:
return state
}
}
function todos(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return [
...state,
{
text: action.text,
completed: false
}
]
case 'COMPLETE_TODO':
return state.map((todo, index) => {
if (index === action.index) {
return Object.assign({}, todo, {
completed: true
})
}
return todo
})
default:
return state
}
}
import { combineReducers, createStore } from 'redux'
const reducer = combineReducers({ visibilityFilter, todos })
const store = createStore(reducer)
¡Eso es todo! Ahora entiendes la esencia de Redux.