Archivos Types

Clase 20 de 57 • Curso de Redux por Bedu

Contenido del curso

Bienvenido al curso

Repaso React

Introducción a Redux

11
¿Qúe es Redux, cuándo usarlo y por qué?
00:15 min

Fases de Redux

Fases Extra

Compartir información en Redux

Métodos HTTP

Conclusión

Tomar examen

Comentarios

Jose Daniel Atencio Manzanillo

student•

una buena practica me gusta mas escalable el codigo

William Schnaider Torres Bermon

student•

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.

Alexander Ortiz Arévalo

student•

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

Miguel Angel Reyes Moreno

student•

¿Y cómo sería el código?

Facundo Martin Gordillo

student•

La forma sería => https://redux.js.org/usage/usage-with-typescript#typing-additional-redux-logic

Jhean Pacheco

student•

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;

Daniel Hurtado

student•

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

Betty Rossana Jimenez Cedeño

student•

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

softdynamic sac

student•

That's right

Seba Cardoso

student•

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

Jonathan Ludeña

student•

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) 👍

Carlos Olivares

student•

Por qué para importar la constante en el reducer se coloca en medio de llaves { TRAER_TODOS } ?

Juan Castro

teacher•

Porque cuando exportamos nuestros action types y reducers usamos "Named Exports" en vez de "Default Exports". :wink:

// Named Export 1
const TRAER_TODOS = "TRAER_TODOS";
export { TRAER_TODOS };

// Named Export 2
export const TRAER_TODOS = "TRAER_TODOS";

// Named Export 2.funciones
export function traerTodos() {
  return ...;
}

// EN TODOS ESTOS CASOS DEBEMOS IMPORTAR
// NUESTRAS VARIABLES O FUNCIONES USANDO {}
import { TRAER_TODOS, traerTodos } from '...';

// Default export
const TRAER_TODOS = "TRAER_TODOS";
export default TRAER_TODOS;

// Default export (funciones)
export default function traerTodos() {
  return ...;
}

// En este caso no necesitamos las llaves y podemos llamar
// a las variables o funciones que importamos como queramos
import TRAER_TODOS from '...';
import traerTodos from '...';
import patito from '...';
import LALALAND from '...';

Andrés Enrique Sanabria Flores

student•

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

Gibran Andre Ayala Cortes

student•

puedes usar commitlint para mejorar tus commits

Brayan Mateo Montañez Baron

student•

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

IRIDIAN GUADALUPE CARRERA MONDRAGÓN

student•

Excelente consejo, Gracias :D

Emmanuel Rodríguez

student•

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.

Miguel Angel Reyes Moreno

student•

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.

Edgar Lopez Arroyo

student•

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

Andrés Felipe Eslava Zuluaga

student•

Existen ya muchos paquetes para los IDE o editores. Ayudan revisando la ortografía y palabras comúnes dentro del proyecto identificadas como funciones, objetos, clases, etc...

Brayhan Alejandro Gabriel Guerrero

student•

si gustan pasar por mi repo, uso functional components

https://github.com/gbrayhan/ReduxCursoBedu

Pablo Etcheverry

student•

¡Muy buena recomendación!

Irungaray Agustin

student•

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!

Johan Mosquera

student•

Excelente recomendacion

Luis Apaza Gutierrez

student•

Muy buena practica

// Named Export 1
const TRAER_TODOS = "TRAER_TODOS";
export { TRAER_TODOS };

// Named Export 2
export const TRAER_TODOS = "TRAER_TODOS";

// Named Export 2.funciones
export function traerTodos() {
  return ...;
}

// EN TODOS ESTOS CASOS DEBEMOS IMPORTAR
// NUESTRAS VARIABLES O FUNCIONES USANDO {}
import { TRAER_TODOS, traerTodos } from '...';

// Default export
const TRAER_TODOS = "TRAER_TODOS";
export default TRAER_TODOS;

// Default export (funciones)
export default function traerTodos() {
  return ...;
}

// En este caso no necesitamos las llaves y podemos llamar
// a las variables o funciones que importamos como queramos
import TRAER_TODOS from '...';
import traerTodos from '...';
import patito from '...';
import LALALAND from '...';

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,
  });
}

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;
  }
}

Archivos Types

Bienvenido al curso

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

¿Qué conocimientos me recomiendan para tomar este curso?

Repaso React

¿Qué es React y cómo funciona?

Preparando nuestro entorno de trabajo

Creación de la app con React

Agregando funciones a la app con React

Stateful vs Stateless

Ciclo de vida de React

Manejando promesas

React Router DOM

Introducción a Redux

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

Fases de Redux

Introducción: las fases de Redux

Store

Reducers

Conexión a un componente

Action Creators

Redux Thunk

Explicación teórica: ciclo completo de Redux

Práctica: ciclo completo de Redux

Fases Extra

Archivos Types

Try Catch

Escenarios asíncronos

Componente Spinner

Componente Fatal

Tabla como componente

Compartir información en Redux

Introducción Compartir información en Redux

Parámetros por URL

Compartir Reducer

Múltiples Reducers

Llamando a múltiples reducers en una acción

Uso del estado en la acción

Evitar segundas búsquedas

Inmutabilidad

Evitar sobrescritura

Validación compuesta

Validación de errores

Modificando respuesta de url

Estado con interacción

Mostrar componentes dinámicamente

Llamadas asincronas dinámicas

Props por herencia vs estado

Estado compartido

Métodos HTTP

Introducción a métodos HTTP

Nuevo ciclo Redux

Normalizar datos

Mapear Objetos

Componente para agregar tarea

Manejar inputs con Reducer

POST

Deshabilitando botón

Redireccionar

Reutilizar componentes

PUT

DELETE

Últimos detalles

Conclusión

Conocimientos adquiridos

Qué hacer a continuación