Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →
Ejemplos
Redux incluye varios ejemplos en su código fuente. La mayoría están disponibles en CodeSandbox, un editor en línea que permite interactuar con ellos directamente.
Counter Vanilla
Ejecuta el ejemplo Counter Vanilla:
git clone https://github.com/reduxjs/redux.git
cd redux/examples/counter-vanilla
open index.html
O explora el sandbox:
No requiere sistema de compilación ni framework de vistas, y muestra el uso directo de la API de Redux con ES5.
Contador
Ejecuta el ejemplo Contador:
git clone https://github.com/reduxjs/redux.git
cd redux/examples/counter
npm install
npm start
O explora el sandbox:
Ejemplo más básico de Redux con React. Por simplicidad, vuelve a renderizar manualmente el componente cuando cambia el store. En proyectos reales, conviene usar los bindings de alto rendimiento de React Redux.
Este ejemplo incluye tests.
Tareas
Ejecuta el ejemplo Tareas:
git clone https://github.com/reduxjs/redux.git
cd redux/examples/todos
npm install
npm start
O explora el sandbox:
Ideal para entender cómo funcionan las actualizaciones de estado con componentes en Redux. Muestra cómo los reducers pueden delegar acciones a otros reducers, y cómo usar React Redux para generar componentes contenedores.
Este ejemplo incluye tests.
Tareas con Deshacer
Ejecuta el ejemplo Tareas con Deshacer:
git clone https://github.com/reduxjs/redux.git
cd redux/examples/todos-with-undo
npm install
npm start
O explora el sandbox:
Variación del ejemplo anterior. Demuestra cómo envolver tu reducer con Redux Undo añade funcionalidad Deshacer/Rehacer con pocas líneas de código.
TodoMVC
Ejecuta el ejemplo TodoMVC:
git clone https://github.com/reduxjs/redux.git
cd redux/examples/todomvc
npm install
npm start
O explora el sandbox:
El clásico ejemplo TodoMVC. Se incluye para comparación, pero cubre los mismos puntos que el ejemplo de Tareas.
Este ejemplo incluye tests.
Carrito de Compras
Ejecuta el ejemplo Carrito de Compras:
git clone https://github.com/reduxjs/redux.git
cd redux/examples/shopping-cart
npm install
npm start
O explora el sandbox:
Este ejemplo muestra patrones idiomáticos importantes de Redux que se vuelven relevantes a medida que tu aplicación crece. En particular, demuestra cómo almacenar entidades de forma normalizada mediante sus IDs, cómo componer reductores en varios niveles, y cómo definir selectores junto a los reductores para encapsular el conocimiento sobre la estructura del estado. También muestra el registro de actividad con Redux Logger y el despacho condicional de acciones mediante el middleware Redux Thunk.
Tree View
Ejecuta el ejemplo Tree View:
git clone https://github.com/reduxjs/redux.git
cd redux/examples/tree-view
npm install
npm start
O revisa el sandbox:
Este ejemplo demuestra cómo renderizar una vista de árbol profundamente anidada y representar su estado en forma normalizada para facilitar actualizaciones desde los reductores. Se logra un buen rendimiento de renderizado porque los componentes contenedores se suscriben granularmente solo a los nodos del árbol que renderizan.
Este ejemplo incluye tests.
Async
Ejecuta el ejemplo Async:
git clone https://github.com/reduxjs/redux.git
cd redux/examples/async
npm install
npm start
O revisa el sandbox:
Este ejemplo incluye lectura de una API asíncrona, obtención de datos en respuesta a entradas del usuario, visualización de indicadores de carga, almacenamiento en caché de respuestas e invalidación de la caché. Utiliza el middleware Redux Thunk para encapsular efectos secundarios asíncronos.
Universal
Ejecuta el ejemplo Universal:
git clone https://github.com/reduxjs/redux.git
cd redux/examples/universal
npm install
npm start
Esta es una demostración básica de renderizado en servidor con Redux y React. Muestra cómo preparar el estado inicial del almacén en el servidor y pasarlo al cliente para que el almacén del cliente pueda iniciarse desde un estado existente.
Real World
Ejecuta el ejemplo Real World:
git clone https://github.com/reduxjs/redux.git
cd redux/examples/real-world
npm install
npm start
O revisa el sandbox:
Este es el ejemplo más avanzado. Es denso por diseño. Cubre mantener entidades obtenidas en una caché normalizada, implementar un middleware personalizado para llamadas API, renderizar datos cargados parcialmente, paginación, almacenamiento en caché de respuestas, visualización de mensajes de error y enrutamiento. Además, incluye Redux DevTools.
Más ejemplos
Puedes encontrar más ejemplos en la página Redux Apps and Examples del Catálogo de complementos de Redux.