Acciones asíncronas

Clase 39 de 58 • Curso Profesional de React con Redux 2016

Diego José Molina Gonzalez

student•

Tengo una duda estimado…

Cada vez que llamo a:

await this.props.actions.postsNextPage();

en el log me aparece lo siguiente:

action undefined @ 13:20:51.880
action SET_POST @ 13:20:52.064

Todo me funciona correctamente en la app… pero por qué siempre antes de llamar al dispatch con la acción SET_POST, se llama siempre al dispatch con una acción undefined?..

Gracias!

Diego José Molina Gonzalez

student•

Como información adicional:

El action que me detalla el log de cuando es undefined es:

 action     function (_x, _x2) {
      return _ref.apply(this, arguments);
    }

Además prev state y next state son iguales

Gracias

Juan Diego Silva Garcia

student•

El orden de los Middlewares es importante para Redux:
primero el middleware thunk y luego createLogger

import { createStore, applyMiddleware } from 'redux';
import createLogger from 'redux-logger';
import thunk from 'redux-thunk';
import reducer from './reducer';

const store = createStore(
  reducer,
  applyMiddleware(thunk, createLogger),
);

export default store;

camilo andres reina cifuentes

student•

Cual es la diferencia entre redux-thunk y redux-saga?

Sergio Daniel Xalambrí

student•

Redux Saga es más complejo ya que usa generadores de ES2015 para manejar el flujo de datos asíncronos, pero en aplicaciones muy grandes se vuelve más útil y es más fácil realizar pruebas automatizadas sobre nuestro código.

Mientras que redux-thunk usa promesas y son simplemente creadores de acciones asíncronos. Redux Saga básicamente es como tener otro proceso que se inicia luego de despachar una acción pero que no necesariamente va a actualizar el estado.

Martín Varela

student•

Buenas, no me queda clara cual es la necesidad de usar redux-thunk. Porque no funcionariía sin esa librería?

Gracias.

Sergio Daniel Xalambrí

student•

Redux no soporta flujos asíncronos, el reducer es solo para tareas síncronas, esto hace que necesitemos manejar eso por nuestra cuenta.

redux-thunk nos facilita hacer funciones asíncronas como vemos en el curso, hay otras opciones, podemos manejar el flujo asíncrono directamente en el componente, pero tenerlo en acciones nos permite compartir luego esa lógica asíncrona entre componentes.

omar garcia garcia

student•

el middleware redux-promise no hace exactamente lo mismo y mas simplificado ?

const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>
  , document.querySelector('.container'));

Sergio Daniel Xalambrí

student•

Son opciones, algo interesantes de redux-thunk y otras opciones como redux-sagas es que te permiten hacer más cosas que solo devolver una promesa. Pero si esa opción te sirve entonces genial!

Diego José Molina Gonzalez

student•

Profesor, me ocurre el siguiente error:

Uncaught (in promise) Error: Actions must be plain objects. Use custom middleware for async actions.

Me podrías ayudar? Gracias!

Sergio Daniel Xalambrí

student•

Aplicaste bien el middleware de redux-thunk? Parece que falta usarlo.

Acciones asíncronas

Bienvenido al curso

Actualizaremos este curso pronto

Bienvenido al curso de React

Fundamentos

¿Qué es React?

Hola Mundo con React

¿Qué es y cómo funciona el Virtual DOM?

Introducción a JSX

Creación de componentes

Componentes Puros vs de Estado

Ciclo de vida de un componente

Ciclo de vida de componentes

Manejo de eventos del DOM

Event handlers con parámetros personalizados

Contexto de la aplicación

Componentes de Alto Orden (HOC) y Mixins

Creación del proyecto

Presentación del proyecto

Instalación de Node.js y usando npm

Estructura de archivos

Iniciar un servidor de render básico - Render en Server

Module bundlers en JavaScript

Configurar Webpack para el servidor de render

Crear una app con React y React Router

Manejo de rutas en el servidor con React Router

Crear cliente para consumir el API

Iniciar la app en el navegador y configurar Webpack para producción

Iniciar un servidor de estáticos con zeit/list

Herramientas de desarrollo de React

Consumir el API y mostrar datos en la home

Perfil de usuarios

Estado de cargando y detalle de post

Paginación de posts mediante scroll infinito

Mostrar listado de comentarios en cada post

Estilizar componentes con CSS Modules

Linter y buenas prácticas con ESLint

Internacionalización con React Intl

Deploy a producción

Implementación de Redux

Patrones de arquitectura de aplicaciones Frontend

Implementación inicial con Redux para los posts

Uso de middlewares

Acciones asíncronas

Dividir el reducer en funciones más pequeñas y combinarlas

Datos inmutables con Immutable.js

Herramientas de desarrollo

Conclusiones

Pruebas automatizadas de reducers

Pruebas de componentes de React

Actualizando a la última versión de React Router

Desafíos

Cambiar el título de la página dependiendo de la ruta (en el servidor y cliente)

Implementar Redux en perfíl de usuario y detalle de un post

Cargar datos iniciales en el servidor

Desafío especial

Contenido bonus

Glosario

Evitar que webpack genere el CSS durante el build del servidor

LazyLoad de imágenes

Animaciones con ReactCSSTransitionGroup

Server render con Next.js

Aplicaciones universales/isomórficas

Iniciar proyectos con create-react-app

Diplomado de desarrollo de aplicaciones con ReactJS