12-redux

Manejo de estado avanzado con React y Redux

El manejo de estado en una aplicación es crítico, y desgraciadamente muchas veces se hace de forma desordenada y sin mucha consistencia. Redux nos ofrece un contenedor de estado que nos ayudará a manejar el estado de forma más consistente y predecible.

Como referencia, Redux es una evolición de ideas presenadas por Flux de Facebook.

Tags: redux, react, reselect, redux-thunk, redux-saga, redux-observable, rxjs, jest, enzyme

Público objetivo

Para quién es este curso?

Requerimientos previos

Qué conocimientos previos se necesitan?

Aprenderás

• create-react-app
• react
• react-dom
• redux
• react-redux
• redux-thunk
• redux-saga
• redux-observable
• rxjs
• reselect
• jest
• enzyme

Producto

Durante este curso construirás un "Single page app" con las siguientes características:

• Estar desarrollada íntegramente en ES6 y empaquetada de manera automatizada con babel o webpack
• Utilizando React y Redux
• Con por lo menos 10 componentes que especifiquen todas sus props, 3 reducers no atómicos (JSON) y 3 actions
• Contar con scripts run, build y deploy, que se encarguen de correr, empaquetar y desplegar la aplicación respectivamente.
• Despeglado en Github pages
• Haber administrado y documentado todo el proceso de creación de la aplicación en GitHub.
• Al día de la demo, la aplicación deberá estar publicada en una URL accesible universalmente.
• No es necesario implementar rutas
• No es necesario implementar persistencia
• No es necesario implementar conexiones remotas

Syllabus

Unidad 01: Estado global vs estado de componentes

• The Single Immutable State Tree
• Describing State Changes with Actions

Unidad 02: Taller - proyecto

• Creación de equipos
• Selección de producto
• Brainstorming, storyboarding
• Identificación y división de tareas

Unidad 03: Acciones asíncronas

• redux-thunk
• redux-saga
• redux-observable
• rxjs

Unidad 04: Taller - proyecto

• Crear app con create-react-app
• Añadir dependencias
• Crear componentes (App, TopBar, Main, List, ListItem)
• Crear reductor
• Crear acciones
• Crear store
• Conectar List a store

Unidad 05: Selectores, data precomputada, filtros y ordenado

• selectores
• filtrado y ordenado
• data precomputada
• reselect

Unidad 06: Taller - proyecto

• crear selectores
• añadir filtrado y ordenado
• memoizar data precomputada

Unidad 07: Code review, QA y tips para demos

En este taller...

Unidad 08: Taller - demos

Cada equipo tendrá 10 minutos para presentar su demo (5min presentación + 5min preguntas).

Autor(es) / Colaboradores

• Lupo Montero
• Otros colaboradores?

Libros

Cada curso debe de estar acompañado de una lista detallada de libros relacionados con los temas tratados en el curso.

Benchmarks

• Getting Started with Redux - egghead.io

Lecturas complementarias

Incluir una lista de capítulos de libros, blog posts, videos, y otros recursos como links a wikipedia, documentación, ...