Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Action creators y actionTypes

15/19
Recursos

Aportes 13

Preguntas 1

Ordenar por:

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

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

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

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. ✨

Mi mamá ortografica estará fudiosa 🤣

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

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.

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>
				<h2>Eliminar UseReducer</h2>
				<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>
		)
	}
}

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

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.

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

Un gran poder, conlleva una gran responsabilidad.

ayuda! tenia que haber parado hace 5 clases, esto está muy interesante.