Bienvenido al curso

1

Conoce a tu profesor y todo lo que aprenderás sobre Redux

2

¿Qué conocimientos me recomiendan para tomar este curso?

Repaso React

3

¿Qué es React y cómo funciona?

4

Preparando nuestro entorno de trabajo

5

Creación de la app con React

6

Agregando funciones a la app con React

7

Stateful vs Stateless

8

Ciclo de vida de React

9

Manejando promesas

10

React Router DOM

Introducción a Redux

11

¿Qúe es Redux, cuándo usarlo y por qué?

Fases de Redux

12

Introducción: las fases de Redux

13

Store

14

Reducers

15

Conexión a un componente

16

Action Creators

17

Redux Thunk

18

Explicación teórica: ciclo completo de Redux

19

Práctica: ciclo completo de Redux

Fases Extra

20

Archivos Types

21

Try Catch

22

Escenarios asíncronos

23

Componente Spinner

24

Componente Fatal

25

Tabla como componente

Compartir información en Redux

26

Introducción Compartir información en Redux

27

Parámetros por URL

28

Compartir Reducer

29

Múltiples Reducers

30

Llamando a múltiples reducers en una acción

31

Uso del estado en la acción

32

Evitar segundas búsquedas

33

Inmutabilidad

34

Evitar sobrescritura

35

Validación compuesta

36

Validación de errores

37

Modificando respuesta de url

38

Estado con interacción

39

Mostrar componentes dinámicamente

40

Llamadas asincronas dinámicas

41

Props por herencia vs estado

42

Estado compartido

Métodos HTTP

43

Introducción a métodos HTTP

44

Nuevo ciclo Redux

45

Normalizar datos

46

Mapear Objetos

47

Componente para agregar tarea

48

Manejar inputs con Reducer

49

POST

50

Deshabilitando botón

51

Redireccionar

52

Reutilizar componentes

53

PUT

54

DELETE

55

Últimos detalles

Conclusión

56

Conocimientos adquiridos

57

Qué hacer a continuación

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Redux por Bedu

Curso de Redux por Bedu

Rodolfo Saldivar

Rodolfo Saldivar

Archivos Types

20/57
Recursos

Aportes 53

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

una buena practica me gusta mas escalable el codigo

Archivos Types

Consiste en la buena práctica de establecer constantes para definir el nombre de las acciones involucradas en los actions y los reducers.
Se establece un directorio llamado types el cual contendrá archivos JS que exportarán diferentes constantes.

Esto mismo se podría solventar implementando TypeScript en nuestro proyecto

Resumen del video = Convertir strings en constantes para detectar errores.

Prefiero crear el archivo types.js en el directorio actions y definir todos los types en un objeto:

const types = {
  getUsers: 'GET_USERS',
};

export default types;

Lo importante de esta solución, es que te permite tener en un solo sitio todo los types y solo modificarlo una vez.

Justo en la case pasada me equivoque en lo mismo y tarde un rato en darme cuenta. Habia escrito trae_usuarios.

Algo que comunmente pasa es que en el Reducer, para este caso usuariosReducer es que debemos tener cuidado en el Swicth de colocar el action.type y no action.payload o solo action

switch(action) ❌
switch(action.payload) ❌
switch(action.type) 👍

Aqu?í les dejo mi versión utilizando react hooks con redux y typescript.
https://github.com/AndrsDev/react-redux-hooks

Excelente forma de detectar errores de typo y manejar una estructura ordenada en el proyecto

Excelente consejo, Gracias 😄

Interesante clase. Sin embargo, en proceso, ese diccionario de acciones pudiera generar confusión en muchos equipos de trabajo.
La comunicación para determinar el diccionario, es clave para alcanzar el éxito como equipo.

Archivos Types

Estas fases no son obligatorias pero sí son altamente recomendables al utiliza Redux.

Le damos más robustes al proyecto con la siguiente estrutura:

Creamos una carpeta “types” justo dentro de src, y creamos el archivo “usuariosTypes.js” (para este ejemplo).

export const TRAER_TODOS = 'traer_todos';

Vamos a hacer referencia a este archivo en el archivo de actions y reducers:

usuariosActions.js:

import axios from 'axios';
import { TRAER_TODOS } from '../types/usuariosTypes';

//*Esto es una promesa por estar haciendo una petición HTTP GET
export const traerTodos = () =>  async (dispatch) => { //* Función que retorna otra función
  const respuesta = await axios.get('https://jsonplaceholder.typicode.com/users');
  dispatch({ //* Este dispatch se comunicará con el reducer
    type: TRAER_TODOS,
    payload: respuesta.data,
  });
}

usuariosReducers.js:

import { TRAER_TODOS } from '../types/usuariosTypes';

const INITIAL_STATE = {
  usuarios: [],
};

export default (state = INITIAL_STATE, action) => { //* El estado es el initial state que regresa una función
  //!Se crea el switch porque llegarán varias tareas y solo se distingue por el nombre
  switch(action.type) {
    case TRAER_TODOS:
      return { ...state, usuarios: action.payload }
    default: return state;
  }
}

Esto es una excelente práctica.

Definitivamente pienso usarlo en mis proyectos, aun que me pregunto si habrá otra manera de revisar los “typos”. 🤔

si gustan pasar por mi repo, uso functional components

https://github.com/gbrayhan/ReduxCursoBedu

¡Muy buena recomendación!

Para crear una carpeta e inmediatamente crear un archivo adentro, en vsc dan click en New File y al nombrarlo ponen (por ejemplo);
**types/usuariosTypes.js
**Siendo types la carpeta y usuariosTypes.js el archivo que inmediatamente se crea adentrro de la misma.
Sirve para ahorrar bastante tiempo!

Excelente recomendacion

Muy buena practica

Cool, es un poco jugar con la organización de funciones, llamados, imports y archivos pero en esencia es lo mismo.

Gracias por este gran consejo!

Muy bueno para errores de sintaxis 😍

Excelente forma se solucionar errores realmente típicos. Gracias 😄

Super me encantan hacer estas cosas, yo desde un principio sospeche que hacer un dispatch colocando un string podría llevar a errores de sintaxis. que bien…

excelente curso vamos bien hasta ahora

Hola si alguien nuevo ve este curso , les recomiendo que usen las extensiones de ‘Auto Import’ y ‘Path Intellisense’ si es que aun no las tienen instaladas , para importar y movernos mas rápidamente. 😄

Quizá parece un poco tedioso, pero en definitiva es muy bueno separar los archivos de esta manera. De hecho, me recuerda al principio de responsabilidad única de SOLID, en dónde siempre tenemos separadas las responsabilidades de cada función, clase, componente, arquitectura. En este caso, el sistema de archivos

Platzi sabe enseñar!

Se me hace similar a como cuando creamos un archivo de variables globales en Sass.

Excelente práctica 🔥

Encontré mi error jejeje

Muy buena práctica, la había visto en otros código y no entendía la razón de crear una constante

Buena Practica!

Esta recomendacion , es de suma importancia

Muy buena recomendación !!

Gran recomendación :'3

Una excelente recomendacion , muchas gracias

Excelente recomendación para errores de este tipo que no marca error en la consola. 🙂

Excelente recomendación

Siempre tuve esa sensación de que con strings podrian llegar a producirse los errores de sintaxis, que bueno saber que hay una forma de evitarlo y que ademas sea una buena practica

exelente consejo

Este material es fantástico

Que buena clase. siempre he tenido inquietud sobre como manejar y administrar ese tipo de cosas en proyectos / aplicaciones grandes, coordinar cambios drásticos que vienen desde el backend en tipos de datos por ejemplo… y tenerlos presentes para aplicarlos de manera óptima en todas partes…

Muy buena practica, excelente

buena clase.

GRACIAS

Excelente, muy buena practica para dar mas claridad y tener todo mas controlado, genial

Esta fase es genial y de gran ayuda y utilidad

Buena recomendacion

Es interesante que una de las cosas que muestra la experiencia de un programador de JavaScript es entender la necesidad de constantes en este tipo de situaciones.

Esto también pude lograrse utilizando TypeScript

Incluso, para no extender tantos archivos de types se puede introducir en el mismo actions.js

actions.js:

export const TRAER_TODOS = "TRAER_TODOS";

export const traerTodos = () => async (dispatch) => {
	/* --- CÓDIGO DEL DISPATCH --- */
}

Y con esto, lo puedes importar en el **_reducer _**pero llamandolo desde el archivo action… Así tienes los types de un solo reducer con su respectiva función de dispatch.

¡Qué chévere! Con esta buena práctica no nos perdemos tan fácilmente.

Nunca había entendido para que eran los types XD