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 →

Recursos de aprendizaje

La documentación de Redux está diseñada para enseñar los conceptos básicos de Redux y explicar conceptos clave para su uso en aplicaciones reales. Sin embargo, la documentación no puede abarcarlo todo. Afortunadamente, existen muchos otros recursos excelentes disponibles para aprender Redux. Te animamos a que los explores. Muchos cubren temas que van más allá del alcance de la documentación o explican los mismos conceptos de otras formas que podrían adaptarse mejor a tu estilo de aprendizaje.

Esta página incluye nuestras recomendaciones de algunos de los mejores recursos externos disponibles para aprender Redux. Para una lista adicional y extensa de tutoriales, artículos y otros recursos sobre React, Redux, JavaScript y temas relacionados, consulta la lista de enlaces React/Redux.

Introducciones básicas

Tutoriales que enseñan los conceptos básicos de Redux y cómo usarlo

• Introducción a React, Redux y TypeScript
  https://blog.isquaredsoftware.com/2020/12/presentations-react-redux-ts-intro/
  Presentación del mantenedor de Redux Mark Erikson que cubre los fundamentos de React, Redux y TypeScript. Los temas de Redux incluyen stores, reductores, middleware, React-Redux y Redux Toolkit.

• Aprende Redux moderno - Redux Toolkit, React-Redux Hooks y RTK Query
  https://www.learnwithjason.dev/let-s-learn-modern-redux
  Un episodio del programa "Learn with Jason" con el mantenedor de Redux Mark Erikson como invitado. El episodio muestra una aplicación codificada en vivo y explica cómo crear un nuevo proyecto React+TS, añadir los paquetes de Redux y configurar Redux Toolkit y React-Redux desde cero (incluida nuestra configuración recomendada de hooks con TS). También muestra cómo usar la futura API de obtención de datos RTK Query y mostrar esos datos en una interfaz.

• Tutorial de Redux: Visión general y recorrido
  https://www.taniarascia.com/redux-react-guide/
  Un tutorial bien escrito de Tania Rascia que explica rápidamente conceptos clave de Redux y muestra cómo construir una aplicación básica de Redux + React usando vanilla Redux y Redux Toolkit.

• Redux para principiantes - La guía amigable para aprender Redux
  https://www.freecodecamp.org/news/redux-for-beginners-the-brain-friendly-guide-to-redux/
  Un tutorial fácil de seguir que construye una pequeña aplicación de tareas con Redux Toolkit y React-Redux, incluyendo obtención de datos.

• Redux simplificado con Redux Toolkit y TypeScript
  https://www.mattbutton.com/redux-made-easy-with-redux-toolkit-and-typescript/
  Un tutorial útil que muestra cómo usar Redux Toolkit y TypeScript juntos para escribir aplicaciones Redux y cómo RTK simplifica el uso típico de Redux.

• Redux: Del hype en Twitter a producción
  https://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/
  Una presentación bien producida que explica visualmente conceptos centrales de Redux, uso con React, organización de proyectos y efectos secundarios con thunks y sagas. Incluye buenos diagramas animados que demuestran cómo fluyen los datos en una arquitectura React+Redux.

Usando Redux con React

Explicaciones de la biblioteca de vinculación React-Redux

• Modernizando una aplicación Redux heredada con React-Redux Hooks
  https://app.egghead.io/playlists/modernizing-a-legacy-redux-application-with-react-hooks-c528
  Serie de videos que muestra las diferencias entre la antigua API connect y la nueva API de hooks de React-Redux, y cómo usar estos hooks en tus componentes.

• Por qué Redux es útil en aplicaciones React
  https://www.fullstackreact.com/articles/redux-with-mark-erikson/
  Explicación de algunos beneficios de usar Redux con React, incluyendo compartir datos entre componentes y recarga en caliente de módulos.

Tutoriales basados en proyectos

Tutoriales que enseñan conceptos de Redux mediante proyectos, incluyendo aplicaciones más grandes de tipo "mundo real"

• Practical Redux
  https://blog.isquaredsoftware.com/2016/10/practical-redux-part-0-introduction/
  https://blog.isquaredsoftware.com/series/practical-redux/
  Serie continua de artículos que demuestra técnicas específicas de Redux mediante la construcción de una aplicación de ejemplo basada en MekHQ para gestionar campañas de Battletech. Escrita por Mark Erikson, co-mantenedor de Redux. Cubre temas como gestión de datos relacionales, conexión de múltiples componentes y listas, lógica compleja de reductores para funcionalidades, manejo de formularios, visualización de diálogos modales y mucho más. (Nota: es una serie antigua; hoy recomendamos patrones más modernos para escribir código Redux, pero muchos principios siguen siendo valiosos).

Implementación de Redux

Explicaciones del funcionamiento interno de Redux mediante reimplementaciones miniaturizadas

• Getting Started with Redux - Serie de vídeos
  https://egghead.io/courses/fundamentals-of-redux-course-from-dan-abramov-bd5cc867
  https://github.com/tayiorbeii/egghead.io_redux_course_notes
  Dan Abramov, creador de Redux, demuestra varios conceptos en 30 vídeos cortos (2-5 minutos). El repositorio de Github contiene notas y transcripciones.

• Building React Applications with Idiomatic Redux - Serie de vídeos
  https://egghead.io/courses/building-react-applications-with-idiomatic-redux
  https://github.com/tayiorbeii/egghead.io_idiomatic_redux_course_notes
  Segunda serie tutorial de Dan Abramov, continuación directa de la primera. Incluye estado inicial del store, uso con React Router, funciones selectoras, normalización de estado, middleware Redux, creadores de acciones asíncronos y más. Repositorio incluye notas.

• Live React: Hot Reloading and Time Travel
  https://youtube.com/watch?v=xsSnOQynTHs
  Charla original de Dan Abramov donde presentó Redux. Muestra cómo las restricciones de Redux facilitan la recarga en caliente con viaje temporal.

• Build Yourself a Redux
  https://zapier.com/engineering/how-to-build-redux/
  Artículo detallado sobre "construye tu mini-Redux", cubriendo núcleo de Redux, connect y middleware.

• Connect.js explicado
  https://gist.github.com/gaearon/1d19088790e70ac32ea636c025ba424e
  Versión simplificada de la función connect() de React Redux que ilustra su implementación básica.

• ¡Escribamos Redux!
  https://www.jamasoftware.com/blog/lets-write-redux/
  Guía paso a paso para escribir una versión miniaturizada de Redux que explica conceptos e implementación.

Reductores

Artículos sobre cómo escribir funciones reductoras

• Aprovechando combineReducers
  https://randycoulman.com/blog/2016/11/22/taking-advantage-of-combinereducers/
  Ejemplos de uso múltiple de combineReducers para crear árboles de estado y reflexiones sobre enfoques de lógica reductora.

• El poder de los reductores de orden superior
  https://slides.com/omnidan/hor#/
  Presentación del autor de redux-undo explicando el concepto de reductores de orden superior.

• Composición de reductores con reductores de orden superior
  https://medium.com/@mange_vibration/reducer-composition-with-higher-order-reducers-35c3977ed08f
  Ejemplos de funciones pequeñas que se componen para tareas reductoras complejas: estado inicial, filtrado, actualización de claves específicas, etc.

• Reductores de Orden Superior - Suena aterrador, pero no lo es
  https://medium.com/@danielkagan/high-order-reducers-it-just-sounds-scary-2b9e5dbfc705
  Explica cómo los reductores pueden componerse como piezas de Lego para crear lógica reutilizable y testeable.

Selectores

Explicaciones sobre cómo y por qué usar funciones selectoras para leer valores del estado

• Redux idiomático: Uso de selectores Reselect para encapsulación y rendimiento
  https://blog.isquaredsoftware.com/2017/12/idiomatic-redux-using-reselect-selectors/
  Guía completa sobre por qué usar funciones selectoras con Redux, cómo usar la biblioteca Reselect para escribir selectores optimizados y consejos avanzados para mejorar el rendimiento.

• ReactCasts #8: Selectores en Redux
  https://www.youtube.com/watch?v=frT3to2ACCw
  Excelente visión general sobre por qué y cómo usar funciones selectoras para recuperar datos del store y derivar datos adicionales.

• Optimizando desarrollo de aplicaciones React-Redux con Reselect
  https://codebrahma.com/reselect-tutorial-optimizing-react-redux-application-development-with-reselect/
  Buen tutorial sobre Reselect. Cubre el concepto de "funciones selectoras", cómo usar su API y selectores memoizados para mejorar rendimiento.

• Uso de Reselect en aplicaciones React-Redux
  https://dashbouquet.com/blog/frontend-development/usage-of-reselect-in-a-react-redux-application
  Analiza la importancia de selectores memoizados para rendimiento y buenas prácticas con Reselect.

• React, Reselect y Redux
  https://medium.com/@parkerdan/react-reselect-and-redux-b34017f8194c
  Explica cómo las funciones selectoras memoizadas de Reselect son útiles en apps Redux y cómo crear instancias únicas por componente.

Normalización

Cómo estructurar el store de Redux como base de datos para máximo rendimiento

• Consultando un store de Redux
  https://medium.com/@adamrackis/querying-a-redux-store-37db8c7f3b0f
  Analiza mejores prácticas para organizar y almacenar datos en Redux, incluyendo normalización y selectores.

• Normalizando stores Redux para máxima reutilización de código
  https://medium.com/@adamrackis/normalizing-redux-stores-for-maximum-code-reuse-ae6e3844ae95
  Reflexiones sobre cómo stores normalizados permiten enfoques útiles de manejo de datos, con ejemplos de desnormalización usando selectores.

• Normalización avanzada de entidades en Redux
  https://medium.com/@dcousineau/advanced-redux-entity-normalization-f5f1fe2aefc5
  Describe el concepto "keyWindow" para rastrear subconjuntos de entidades, similar a una "vista" SQL. Extensión útil de datos normalizados.

Middleware

Explicaciones y ejemplos de cómo funciona el middleware y cómo escribirlo

• Explorando middlewares de Redux
  https://blog.krawaller.se/posts/exploring-redux-middleware/
  Comprender middlewares mediante pequeños experimentos.

• Tutorial de middleware Redux
  https://github.com/pshrmn/notes/blob/master/redux/redux-middleware.md
  Visión general sobre qué es middleware, cómo funciona applyMiddleware y cómo escribirlo.

• ReactCasts #6: Middleware de Redux
  https://www.youtube.com/watch?v=T-qtHI1qHIg
  Screencast que describe cómo encaja el middleware en Redux, sus usos e implementación personalizada.

• Guía para principiantes sobre middleware de Redux
  https://www.codementor.io/reactjs/tutorial/beginner-s-guide-to-redux-middleware
  Una explicación útil de casos de uso de middleware, con numerosos ejemplos

• Composición funcional en Javascript
  https://joecortopassi.com/articles/functional-composition-in-javascript/
  Explicación detallada de cómo funciona la función compose

Efectos secundarios - Conceptos básicos

Introducción al manejo de comportamiento asíncrono en Redux

• Stack Overflow: Despachando acciones de Redux con tiempo de espera
  https://stackoverflow.com/questions/35411423/how-to-dispatch-a-redux-action-with-a-timeout/35415559#35415559
  Dan Abramov explica los fundamentos para gestionar comportamiento asíncrono en Redux, mostrando progresivamente distintos enfoques (llamadas asíncronas en línea, creadores de acciones asíncronas, middleware thunk).

• Stack Overflow: ¿Por qué necesitamos middleware para flujos asíncronos en Redux?
  https://stackoverflow.com/questions/34570758/why-do-we-need-middleware-for-async-flow-in-redux/34599594#34599594
  Dan Abramov da razones para usar thunks y middleware asíncrono, junto con patrones útiles para utilizar thunks.

• ¿Qué diablos es un "thunk"?
  https://daveceddia.com/what-is-a-thunk/
  Una explicación rápida sobre lo que significa "thunk" en general y específicamente en Redux.

• Thunks en Redux: Conceptos básicos
  https://medium.com/fullstack-academy/thunks-in-redux-the-basics-85e538a3fe60
  Un análisis detallado sobre qué son los thunks, qué problemas resuelven y cómo usarlos.

Efectos secundarios - Avanzado

Herramientas y técnicas avanzadas para gestionar comportamiento asíncrono

• ¿Cuál es la forma correcta de hacer operaciones asíncronas en Redux?
  https://decembersoft.com/posts/what-is-the-right-way-to-do-asynchronous-operations-in-redux/
  Una excelente visión general de las bibliotecas más populares para efectos secundarios en Redux, con comparativas de funcionamiento.

• Redux de 4 formas
  https://medium.com/react-native-training/redux-4-ways-95a130da0cdc
  Comparativas lado a lado implementando recuperación básica de datos usando thunks, sagas, observables y middleware de promesas.

• Redux idiomático: Reflexiones sobre thunks, sagas, abstracciones y reusabilidad
  https://blog.isquaredsoftware.com/2017/01/idiomatic-redux-thoughts-on-thunks-sagas-abstraction-and-reusability/
  Respuesta a preocupaciones sobre "thunks son malos", argumentando que thunks (y sagas) siguen siendo enfoques válidos para gestionar lógica síncrona compleja y efectos secundarios asíncronos.

• Javascript Power Tools: Redux-Saga
  https://formidable.com/blog/2017/javascript-power-tools-redux-saga/
  https://formidable.com/blog/2017/composition-patterns-in-redux-saga/
  https://formidable.com/blog/2017/real-world-redux-saga-patterns/
  Una serie fantástica que enseña conceptos, implementación y beneficios de Redux-Saga, incluyendo cómo los generadores ES6 controlan flujos funcionales, cómo componer sagas para concurrencia y casos prácticos de uso.

• Explorando Redux Sagas
  https://medium.com/onfido-tech/exploring-redux-sagas-cc1fca2015ee
  Un artículo excelente que explora cómo usar sagas como capa de unión para implementar lógica de negocio desacoplada en aplicaciones Redux.

• Domando Redux con Sagas
  https://objectpartners.com/2017/11/20/taming-redux-with-sagas/
  Una buena visión general de Redux-Saga, que incluye información sobre funciones generadoras, casos de uso para sagas, cómo usar sagas para manejar promesas y pruebas de sagas.

• Estado de Redux Reactivo con RxJS
  https://ivanjov.com/reactive-redux-state-with-rxjs/
  Explica el concepto de "Programación Reactiva" y la biblioteca RxJS, mostrando cómo usar redux-observable para obtener datos, junto con ejemplos de pruebas.

• Usando redux-observable para manejar lógica asíncrona en Redux
  https://medium.com/dailyjs/using-redux-observable-to-handle-asynchronous-logic-in-redux-d49194742522
  Un artículo extenso que compara una implementación basada en thunks para manejar un ejemplo de dibujo de líneas frente a una implementación basada en observables.

Pensando en Redux

Análisis profundos sobre cómo está diseñado Redux para usarse y por qué funciona de esta manera

• Cuándo (y cuándo no) recurrir a Redux
  https://changelog.com/posts/when-and-when-not-to-reach-for-redux
  El mantenedor de Redux, Mark Erikson, describe los problemas que Redux fue creado para resolver y cómo se compara con otras herramientas de uso común.

• Puede que no necesites Redux
  https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367
  Dan Abramov analiza las ventajas y desventajas de usar Redux.

• Idiomatic Redux: El Tao de Redux, Parte 1 - Implementación e Intención
  https://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-1/
  Un análisis profundo de cómo funciona realmente Redux, las restricciones que te pide seguir y la intención detrás de su diseño y uso.

• Idiomatic Redux: El Tao de Redux, Parte 2 - Práctica y Filosofía
  https://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-2/
  Una mirada de seguimiento sobre por qué existen los patrones de uso comunes de Redux, otras formas en que Redux puede ser usado y reflexiones sobre los pros y contras de esos diferentes patrones y enfoques.

• ¿Qué tiene de bueno Redux?
  https://medium.freecodecamp.org/whats-so-great-about-redux-ac16f1cc0f8b
  Un análisis profundo y fascinante sobre cómo se compara Redux con la POO y el paso de mensajes, cómo el uso típico de Redux puede derivar en funciones "setter" al estilo Java con más código repetitivo, y una especie de súplica por una abstracción de alto nivel "bendecida" sobre Redux para que sea más fácil trabajar y aprender para los principiantes. Muy recomendable.

Arquitectura de Redux

Patrones y prácticas para estructurar aplicaciones Redux más grandes

• Evitando la complejidad accidental al estructurar el estado de tu aplicación
  https://hackernoon.com/avoiding-accidental-complexity-when-structuring-your-app-state-6e6d22ad5e2a
  Un excelente conjunto de pautas para organizar la estructura de tu store de Redux.

• Redux paso a paso: Un flujo de trabajo simple y robusto para aplicaciones de la vida real
  https://hackernoon.com/redux-step-by-step-a-simple-and-robust-workflow-for-real-life-apps-1fdf7df46092
  Un seguimiento del artículo "Complejidad accidental", que discute los principios

• Cosas que desearía haber sabido sobre Redux
  https://medium.com/horrible-hacks/things-i-wish-i-knew-about-redux-9924abf2f9e0
  https://www.reddit.com/r/javascript/comments/4taau2/things_i_wish_i_knew_about_redux/
  Una serie de consejos excelentes y lecciones aprendidas tras desarrollar una aplicación con Redux. Incluye información sobre cómo conectar componentes, seleccionar datos y la estructura de la aplicación/proyecto. Discusión adicional en Reddit.

• React+Redux: Consejos y mejores prácticas para un código limpio, fiable y mantenible
  https://speakerdeck.com/goopscoop/react-plus-redux-tips-and-best-practices-for-clean-reliable-and-scalable-code
  Una excelente presentación con gran variedad de consejos y sugerencias, incluyendo mantener los creadores de acciones simples y la manipulación de datos en reductores, abstraer llamadas API, evitar esparcir props, y más.

• Redux para gestión de estado en aplicaciones web grandes
  https://blog.mapbox.com/redux-for-state-management-in-large-web-apps-c7f3fab3ce9b
  Excelente análisis y ejemplos de arquitectura Redux idiomática, y cómo Mapbox aplica estos enfoques en su aplicación Mapbox Studio.

Aplicaciones y Ejemplos

• Ejemplo React-Redux RealWorld: TodoMVC para el mundo real
  https://github.com/GoThinkster/redux-review
  Una aplicación completa de ejemplo del "mundo real" construida con Redux. Muestra un sitio de blogs social similar a Medium que incluye autenticación JWT, CRUD, favoritos de artículos, seguir usuarios, enrutamiento y más. El proyecto RealWorld también incluye muchas otras implementaciones de frontend y backend del sitio, diseñadas específicamente para mostrar cómo se comparan diferentes implementaciones de servidor y cliente del mismo proyecto y especificación API.

• Project Mini-Mek
  https://github.com/markerikson/project-minimek
  Una aplicación de ejemplo para demostrar varias técnicas útiles de Redux, que acompaña la serie de blogs "Practical Redux" en https://blog.isquaredsoftware.com/series/practical-redux

• react-redux-yelp-clone
  https://github.com/mohamed-ismat/react-redux-yelp-clone
  Adaptación de la aplicación "Yelp Clone" de FullStackReact. Extiende la original usando Redux y Redux Saga en lugar de estado local, junto con React Router v4, styled-components y otros estándares modernos. Basado en el kit de inicio React-Boilerplate.

• WordPress-Calypso
  https://github.com/Automattic/wp-calypso
  El nuevo WordPress.com basado en JavaScript y API

• Sound-Redux
  https://github.com/andrewngu/sound-redux
  Un cliente de Soundcloud construido con React / Redux

• Webamp
  https://webamp.org
  https://github.com/captbaritone/webamp
  Recreación en el navegador de Winamp2, construida con React y Redux. Reproduce MP3s reales y permite cargar archivos MP3 locales.

• Tello
  https://github.com/joshwcomeau/Tello
  Una forma sencilla y agradable de seguir y gestionar programas de televisión

• io-808
  https://github.com/vincentriemer/io-808
  Intento de recrear completamente una caja de ritmos TR-808 basada en web

Traducciones de la Documentación de Redux

• 中文文档 — Chino

• 繁體中文文件 — Chino tradicional

• Redux in Russian — Ruso

• Redux en Español - Español

• Redux en coreano - Coreano

Libros

• Redux in Action
  https://www.manning.com/books/redux-in-action
  Un libro completo que cubre muchos aspectos clave del uso de Redux, incluyendo los fundamentos de reductores y acciones, integración con React, middleware complejo y efectos secundarios, estructura de aplicaciones, rendimiento, pruebas y mucho más. Explica de manera excelente los pros, contras y compensaciones de múltiples enfoques para usar Redux. Recomendado personalmente por Mark Erikson, co-mantenedor de Redux.

• The Complete Redux Book
  https://leanpub.com/redux-book
  ¿Cómo gestiono un estado complejo en producción? ¿Por qué necesito potenciadores del store? ¿Cuál es la mejor forma de manejar validaciones de formularios? Encuentra respuestas a estas preguntas y muchas más usando términos sencillos y código de ejemplo. Aprende todo lo necesario para usar Redux y construir aplicaciones web complejas listas para producción. (Nota: ¡ahora permanentemente gratuito!)

• Taming the State in React
  https://www.robinwieruch.de/learn-react-redux-mobx-state-management/
  Si aprendiste React con el libro anterior del autor "The Road to learn React", "Taming the State in React" será la combinación perfecta para aprender sobre gestión de estado básica y avanzada en React. Comenzarás aprendiendo solo Redux sin React. Luego, el libro te muestra cómo conectar Redux a tu aplicación React. Los capítulos avanzados te enseñarán sobre normalización, nomenclatura, selectores y acciones asíncronas. Al final, configurarás y construirás una aplicación del mundo real con React y Redux.

Cursos

• Modern React with Redux, por Stephen Grider (de pago)
  https://www.udemy.com/react-redux/
  Domina los fundamentos de React y Redux con este tutorial mientras desarrollas aplicaciones con React Router, Webpack y ES2015. Este curso te pondrá en marcha rápidamente y te enseñará el conocimiento esencial para comprender en profundidad y construir componentes React y estructurar aplicaciones con Redux.

• Redux, por Tyler McGinnis (de pago)
  https://tylermcginnis.com/courses/redux/
  Al aprender Redux, necesitas hacerlo en el contexto de una aplicación lo suficientemente grande para ver sus beneficios. Por eso este curso es extenso. Un nombre más adecuado sería "Redux en el Mundo Real". Si estás cansado de los tutoriales de Redux basados en "listas de tareas", has llegado al lugar correcto. En este curso hablaremos sobre lo que hace especial a Redux para gestionar el estado en tu aplicación. Construiremos una aplicación del "mundo real" para que veas cómo Redux maneja casos complejos como actualizaciones optimistas y gestión de errores. También cubriremos otras tecnologías que funcionan bien con Redux, como Firebase y CSS Modules.

• Learn Redux, por Wes Bos (gratuito)
  https://learnredux.com/
  Curso en video donde se construye 'Reduxstagram' - una aplicación fotográfica sencilla que simplifica las ideas centrales detrás de Redux, React Router y React.js.

Más recursos

• React-Redux Links es una lista curada de artículos, tutoriales y contenido relacionado de alta calidad para React, Redux, ES2015 y más.

• Redux Ecosystem Links es una colección categorizada de bibliotecas, complementos y utilidades relacionados con Redux.

• Awesome Redux es una lista extensa de repositorios relacionados con Redux.

• DEV Community es un espacio para compartir proyectos, artículos y tutoriales sobre Redux, así como iniciar discusiones y solicitar feedback sobre temas relacionados. Desarrolladores de todos los niveles son bienvenidos a participar.