Manejo de Action Types y Action Creators en React Reducers

Clase 15 de 19 • Curso de React.js: Manejo Profesional del Estado

Clase anteriorSiguiente clase

Manuel Andrés Buriticá Yepes

student•

Juan Castro

teacher•

JAJAJAJAJAJAJAJA

Raycris Maldonado

student•

🤣🤣🤣🤙🏾

Gabriel Hernández Valdez

student•

Jah, el profe no me gano, puse pausa al video y termine primero !

Roberto Pérez

student•

Adrián Rojas Sánchez

student•

Julian David Toro Medina

student•

Action Types: consiste en usar un objeto para almacenar las keys de nuestro reducer:

const actionTypes = {
   error: 'ERROR',
   confirm: 'CONFIRM',
}

Action Creators: consiste en declarar funciones que contienen nuestros dispatch:

const onError = () => dispatch({ type: actionTypes.error });
 
const onWrite = ({ target: { value } }) => {
    dispatch({ type: actionTypes.write, payload: value });
}

Ronaldo Delgado

student•

Buena deducción!

Daniel Alberto Vega Bejarano

student•

actionType es más el tipo de acción, no que se tenga que poner dentro de un objeto. =)

Obed Paz

student•

Min 11:26 No es que el lenguaje le ponga los parentesis, sino que le estamos dando una referencia de esa variable, cuando JS va a la variable se da cuenta que es una funcion, y la ejecuta. ✨

Roman Eduardo

student•

Genio!

Marlon Estiben Varon Gonzalez

student•

Le agregue la propiedad de disabled al input ya que me parecía algo raro que podamos seguir escribiendo cuando el loading esta en true.

<input
               disabled={state.loading}
               placeholder="Codigo de seguridad"
               value={state.value}
               onChange={onWrite}
/>

Así cuando loading sea true, disabled será true y viceversa.

Max Andy Diaz Neyra

student•

actionTypes

Cuando llamamos a dispath debemos darle un valor a action.type.
Con el uso de actionTypes podremos evitar los errores de tipeo.
consiste en usar un objeto para almacenar las keys de nuestro reducer

Action creators:

Son funciones para actualizar el estado
Consiste en declarar funciones que contienen nuestros dispatch

Nicolas ortiz suarez

student•

Mi mamá ortografica estará fudiosa 🤣

Angel David Contreras Barrios

student•

Agregue algunos estilos básicos.. .

Braulio Quezada

student•

Ese momento donde agradeces tener GitHub Copilot y le ganas al profe xd, tal vez hice un poco de trampa jajaja

Christian Boffill

student•

Usando actionTypes con switch/case:

import React, { useEffect, useReducer, Fragment } from 'react'

const SECURITY_CODE = 'paradigma'

const initialState = {
	value: '',
	loading: false,
	error: false,
	deleted: false,
	confirmed: false,
}

const actionTypes = {
	error: 'Error',
	confirm: 'Confirm',
	write: 'Write',
	check: 'Check',
	delete: 'Delete',
	reset: 'Reset',
}

const reducer = (state, action) => {
	switch (action.type) {
		case actionTypes.error :
			return {
				...state,
				error: true,
				loading: false,
			}
		case actionTypes.confirm :
			return {
				...state,
				loading: false,
				error: false,
				confirmed: true,
			}
		case actionTypes.write :
			return {
				...state,
				value: action.payload,
			}
		case actionTypes.check :
			return {
				...state,
				loading: true,
				error: false,
			}
		case actionTypes.delete :
			return {
				...state,
				deleted: true,
			}
		case actionTypes.reset :
			return {
				...state,
				value: '',
				confirmed: false,
				deleted: false,
			}
		default:
			return {
				...state,
			}
	}
}

export default function UseReducer() {
	const [ state, dispatch ] = useReducer(reducer, initialState)

	useEffect(
		() => {
			if (state.loading) {
				setTimeout(() => {
					if (state.value === SECURITY_CODE) {
						dispatch({ type: actionTypes.confirm })
					} else {
						dispatch({ type: actionTypes.error })
					}
				}, 1000)
			}
		},
		[ state.loading ]
	)

	if (!state.deleted && !state.confirmed) {
		return (
			<div>
				<h3>Eliminar UseReducer</h3>
				<p>Por favor, escriba el código de seguridad.</p>
				{state.loading ? 'Cargando...' : state.error ? 'Error :(' : null}
				<br />
				<input
					type='text'
					placeholder='código de seguridad'
					value={state.value}
					onChange={ev => dispatch({ type: actionTypes.write, payload: ev.target.value })}
				/>
				<button onClick={() => dispatch({ type: actionTypes.check })}>Comprobar</button>
			</div>
		)
	} else if (!state.deleted && state.confirmed) {
		return (
			<Fragment>
				<p>Pedimos confirmación. ¿Tas seguro?</p>
				<button onClick={() => dispatch({ type: actionTypes.delete })}>Si, eliminar</button>
				<button onClick={() => dispatch({ type: actionTypes.reset })}>No, me arrepentí</button>
			</Fragment>
		)
	} else {
		return (
			<Fragment>
				<p>Eliminado con éxito</p>
				<button onClick={() => dispatch({ type: actionTypes.reset })}>Regresar</button>
			</Fragment>
		)
	}
}

Juan Ignacio Marderwald

student•

Me volvió a pasar lo mismo que con los otros cursos de este profesor, aunque considero que explica muy bien y sabe mucho; te marea demasiado cuando va borrando y cambiando tanto el código. Tal vez está bueno que se explique de una como sería, o buscar otro método de explicar los conceptos. Realmente es bastante confusa esta manera de explicar.

Fernando Orozco Velasquez

student•

Es bueno acostumbrarse a borrar o cambiar grandes partes de nuestro código para implementar cambios y no estancarnos con solo una manera de hacer las cosas 👍

Luis Felipe Silgado Cortázar

student•

Enrique Aguilera

student•

con TypeScript podemos evitar los errores ortograficos, utilizando type o interfaces

type State = {
    error: boolean,
    loading: boolean,
    value: string,
    deleted: boolean,
    confirmed: boolean
}

type Action = {
    type: "CHECK" | "ERROR" | "CONFIRM" | "WRITE" | "DELETED" | "RESET",
    payload?: string
}

const reducerObject = <T,>(state: T, payload = "") => ({
    CONFIRM: {
        ...state,
        error: false,
        loading: false,
        confirmed: true
    },
    ERROR: {
        ...state,
        error: true,
        loading: false
    },
    CHECK: { 
        ...state,
        loading: true
    },
    WRITE: {
        ...state,
        value: payload
    },
    DELETED: {
        ...state,
        deleted: true
    },
    RESET: {
        ...state,
        confirmed: false,
        deleted: false,
        value: ""
    }
})

const reducer = (state: State, action: Action): State => {
    return reducerObject(state, action.payload)[action.type]
}

Rodrigo Roldan

student•

Creería que la parte de Action Types no sería necesaria si utilizamos Typescript para React. Ya que explícitamente puedo declararle los tipos que puede soportar la key "type" de la siguiente forma:

type Action ={ type: 'WRITE' | 'CONFIRM' | 'ERROR' | 'DELETE' | 'CHECK' | 'RESET', payload?: string, }

Entonces si me llego a equivocar, TS automáticamente lo detecta y me arroja el error.

Juan Pico

student•

Es en estos casos donde prefiero typescript

Gabriel Hernández Valdez

student•

Yo pase el argumento de onWrite de la siguiente manera :

        <input 
          placeholder="Código de Seguridad" 
          value={state.value} 
          onChange={e => {
            onWrite(e.target.value)
        }}/>

y en el action creator

  const onWrite = (newValue) => {
    setState({
      ...state,
      value: newValue
    })
  }

Irving Juárez

student•

Este es el resultado final de el proyecto trabajado en este curso

Repositorio
Online

Jonathan Guidi

student•

No se hasta que punto conviene hacer el codigo tan declarativo.. lo cuestiono mucho

Luis Miguel Aponte Rayo

student•

Pienso igual, creo que es innecesario

reynaldo gutierrez

student•

por que se complica tanto ??? me parece innesesario e.e

Diego Reyes Cabrera

student•

Sintaxis para asignar el valor de una variable como llave de un objeto:

const username = "juan"

const obj = {
	[username]: "hernandez"
}

console.log(obj.juan) //hernandez

Link

import React, { useEffect, useReducer, Fragment } from 'react'

const SECURITY_CODE = 'paradigma'

const initialState = {
	value: '',
	loading: false,
	error: false,
	deleted: false,
	confirmed: false,
}

const actionTypes = {
	error: 'Error',
	confirm: 'Confirm',
	write: 'Write',
	check: 'Check',
	delete: 'Delete',
	reset: 'Reset',
}

const reducer = (state, action) => {
	switch (action.type) {
		case actionTypes.error :
			return {
				...state,
				error: true,
				loading: false,
			}
		case actionTypes.confirm :
			return {
				...state,
				loading: false,
				error: false,
				confirmed: true,
			}
		case actionTypes.write :
			return {
				...state,
				value: action.payload,
			}
		case actionTypes.check :
			return {
				...state,
				loading: true,
				error: false,
			}
		case actionTypes.delete :
			return {
				...state,
				deleted: true,
			}
		case actionTypes.reset :
			return {
				...state,
				value: '',
				confirmed: false,
				deleted: false,
			}
		default:
			return {
				...state,
			}
	}
}

export default function UseReducer() {
	const [ state, dispatch ] = useReducer(reducer, initialState)

	useEffect(
		() => {
			if (state.loading) {
				setTimeout(() => {
					if (state.value === SECURITY_CODE) {
						dispatch({ type: actionTypes.confirm })
					} else {
						dispatch({ type: actionTypes.error })
					}
				}, 1000)
			}
		},
		[ state.loading ]
	)

	if (!state.deleted && !state.confirmed) {
		return (
			<div>
				<h3>Eliminar UseReducer</h3>
				<p>Por favor, escriba el código de seguridad.</p>
				{state.loading ? 'Cargando...' : state.error ? 'Error :(' : null}
				<br />
				<input
					type='text'
					placeholder='código de seguridad'
					value={state.value}
					onChange={ev => dispatch({ type: actionTypes.write, payload: ev.target.value })}
				/>
				<button onClick={() => dispatch({ type: actionTypes.check })}>Comprobar</button>
			</div>
		)
	} else if (!state.deleted && state.confirmed) {
		return (
			<Fragment>
				<p>Pedimos confirmación. ¿Tas seguro?</p>
				<button onClick={() => dispatch({ type: actionTypes.delete })}>Si, eliminar</button>
				<button onClick={() => dispatch({ type: actionTypes.reset })}>No, me arrepentí</button>
			</Fragment>
		)
	} else {
		return (
			<Fragment>
				<p>Eliminado con éxito</p>
				<button onClick={() => dispatch({ type: actionTypes.reset })}>Regresar</button>
			</Fragment>
		)
	}
}

type State = {
    error: boolean,
    loading: boolean,
    value: string,
    deleted: boolean,
    confirmed: boolean
}

type Action = {
    type: "CHECK" | "ERROR" | "CONFIRM" | "WRITE" | "DELETED" | "RESET",
    payload?: string
}

const reducerObject = <T,>(state: T, payload = "") => ({
    CONFIRM: {
        ...state,
        error: false,
        loading: false,
        confirmed: true
    },
    ERROR: {
        ...state,
        error: true,
        loading: false
    },
    CHECK: { 
        ...state,
        loading: true
    },
    WRITE: {
        ...state,
        value: payload
    },
    DELETED: {
        ...state,
        deleted: true
    },
    RESET: {
        ...state,
        confirmed: false,
        deleted: false,
        value: ""
    }
})

const reducer = (state: State, action: Action): State => {
    return reducerObject(state, action.payload)[action.type]
}

Manejo de Action Types y Action Creators en React Reducers

Introducción

Manejo Avanzado del Estado en React.js

Estado y ciclo de vida con React.Component

Creación de Proyectos React y Manejo de Estado con Hooks y Clases

Diferencias entre Componentes de Clase y Función en React

Efectos y ciclo de vida en componentes React con useEffect

Métodos del ciclo de vida en componentes de clase React

Estados independientes y compuestos

Diferencias entre estados simples y compuestos en React

Actualización de estados en interfaces de usuario con React

Estados Compuestos en Componentes de Clase con React

Estados Compuestos con React.UseState: Manejo y Actualización Eficiente

Código imperativo y declarativo en React

Programación Imperativa vs Declarativa: Implementación en React

Programación Declarativa: Simplificación y Abstracción de Estados

Uso de UseReducer para manejar el estado en React

Creación de Reducers: If, Switch y Reducer Objects en React

Manejo de estados con useReducer en React

Manejo de Action Types y Action Creators en React Reducers

Manejo del estado en TODO Machine

Manejo de Estados Derivados en React con useState

Migración de UseState a UseReducer en React

Optimización de Custom Hooks en React sin UseReducer

Próximos pasos

Manejo Profesional del Estado en React con Hooks y Reducers