1

Estoy implementando un reducer para datos de la siguiente interfaces. Mi inquietud está en UserReducer.tsx, principalmente cuando quiero modificar el estado, con la action 'addUser'. ¿Es correcta la sentencia?

return{
         ...state,
      }

Porque el reducer no es un array de usuario, es simplemente un dato de usuario.

  • interface.tsx

    export interface usuario{
      email:string
      nombre:string
      apellido:string
      foto:string
      calificacion:number
      tipoCliente:string
     }
    

*UserReducer.tsx

import { usuario } from "../Interfaces/interfaces";
type UserAction =  {type:'addUser', payload: usuario}

export const UserReducer = (state:usuario, action:UserAction):usuario =>{
    switch(action.type){
        case 'addUser':
            return{
               // usuario:[state,action.payload]
               ...state,
            }
        default:
            return state
    }
}

*UserProvider.tsx

import { useReducer } from "react";
import { usuario } from "../Interfaces/interfaces";
import { UserContext } from "./UserContext";
import { UserReducer } from "./UserReducer";

const INITIAL_STATE : usuario= {
    email:"",
    nombre:"",
    apellido:"",
    foto:"",
    calificacion:0,
    tipoCliente:""
};
    
interface props {
    children: JSX.Element | JSX.Element[]
}

export const UserProvider = ( {children}:props ) => {

    const [datosUsuario,dispach] = useReducer(UserReducer,INITIAL_STATE);


    return (
        <UserContext.Provider value={{datosUsuario}}>
            {children}
        </UserContext.Provider>
    )
}

1 respuesta 1

1

La función reducer regresa una copia del objeto state.

Aquí, se esta regresando una copia del objeto state, entonces esta bien códificado:

return {
...state
}

El objeto state de acuerdo a tu interface detalla un objeto usuario con propiedades:

export interface usuario{
  email:string
  nombre:string
  apellido:string
  foto:string
  calificacion:number
  tipoCliente:string
 }

También, initial_state usa la inteface usuario:

const INITIAL_STATE : usuario= {
    email:"",
    nombre:"",
    apellido:"",
    foto:"",
    calificacion:0,
    tipoCliente:""
};

Interface array de objetos tipo usuario

Ahora, suponiendo que se va a crear un array de objetos tipo usuario, se crear una interface usuarios que detalla a un array de objetos tipo usuario, esto debe funcionar:

export interface usuarios {
   usuarios: usuario[]
}

Luego, se tendría que modificar la declaracion de init_state, para que sea un array de objetos y no un objeto:

const INITIAL_STATE : usuarios[] = [];

Y el reducer recibiría este array como state, por lo que tendrìa que regersar una copia del mismo:

//usuarios en la interface
export const UserReducer = (state:usuarios, action:UserAction):usuarios =>{
    switch(action.type){
        case 'addUser':
            return{
               //payload trae un objeto tipo usuario
               // usuario:[state,action.payload]
               [...state, action.payload]
            }
        default:
            return state
    }
}

Espero que la respuesta sea de ayuda.

2
  • Gracias por la respuesta. Lo que si no quiero crear un array de usuarios solo un usuario. En vez de reducer deberé usar un useState? Commented el 3 mar. 2022 a las 23:41
  • 1
    Si la estructura del objeto state es compleja, se recomienda useReducer, en este caso useState parece ser la opción a elegir.
    – g.4
    Commented el 4 mar. 2022 a las 1:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.