0

Muy buenas noches, llevo unos dias estancada tratando de agarrar el objeto enviado en mi dispatch. Soy nueva en redux, y no he podido encontrar algun tipo de documentacion que me sirva en eso precisamente. vi por ahi que usaban .getState pero no me reconoce la funcion. me gustaria que este objeto que me muestra en redux

introducir la descripción de la imagen aquí

pueda almacenarlo en una variable, y acceder a su _id este seria mi codigo

import React, { Fragment, useEffect, useState } from 'react'
import MetaData from '../layout/metadata'
import Sidebar from './sidebar'
import { useAlert } from 'react-alert'
import { useDispatch, useSelector } from 'react-redux'
import { CREATE_SERVICE_RESET} from '../../constants/services_constant'
import { clearErrors, newService } from '../../actions/services_actions'


export const NewService = () => {
  
  const [nombre, setNombre] = useState("")
  const [descripcion, setDescripcion] = useState("")

  const alert = useAlert();
  const dispatch = useDispatch();

  const { loading, error, success } = useSelector(state => state.newService) //este viene del store.js

  useEffect(() => {
    if (error) {
      alert.error(error)
      dispatch(clearErrors())
    }
    if (success) {
      alert.success('Categorie created successfully');
      dispatch({
        type: CREATE_SERVICE_RESET,
      })
    }
    
  }, [dispatch, alert, error, success])

  const GuardarCategoria = async () => {
    
    const formData = new FormData();
    formData.set('nombre', nombre)
    formData.set('descripcion', descripcion)
    alert.success("Se ha creado una nueva categoria")
    
    dispatch(newService(formData))
    
  }
  return (
    <Fragment>
      {loading ? <div className='d-flex justify-content-center align-items-center m-5'>
        <h2 className='quantify text-white'> Loading...</h2>
      </div> : (
        <Fragment>
          <MetaData title={"New Service"}></MetaData>
          <div className='backgroundFormus'>
            <div className=' container container-fluid'>
              <div className="row">
                <div className="col-12 col-md-2">
                  <Sidebar></Sidebar>
                </div>
                <div className="col-12 col-md-1"></div>
                <div className='col-12 col-md-6'>
                  <div className='d-flex justify-content-center align-items-center mt-4 text-white'>
                    <Fragment>
                      <form className="shadow-lg">
                        <h1 className='quantify text-center'>Nuevo Categoria Servicio</h1>
                        <div className='form-group mb-4'>
                          <label className="form-label" htmlFor='name_field'>Nombre de la categoria</label>
                          <input type="name" id="name_field" className="form-control" name='nombre'
                            value={nombre} onChange={(e) => setNombre(e.target.value)} />
                        </div>
                        <div className='form-group mb-4'>
                          <label className="form-label" htmlFor='name_field'>Descripcion de la categoria</label>
                          <input type="text" id="descripcion_field" className="form-control" name='descripcion'
                            value={descripcion} onChange={(e) => setDescripcion(e.target.value)} />
                        </div>
                        <button id="btnAgregar" data-bs-toggle="modal" data-bs-target="#staticBackdrop"
                          className="btn w-100 me-2 text-white bg-danger"
                          onClick={GuardarCategoria}>Insertar Un Servicio
                        </button>
                      </form>
                    </Fragment>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </Fragment>
      )}
    </Fragment>
  )
}

Con ese id pienso mandarlo por el boton para que al abrir la nueva pagina me salga cargado el _id en la ruta del buscador. les agradecería mucho si me pueden ayudar!

reducer

export const newServiceReducer = (state = { service: {} }, action) =>{
switch (action.type) {
    case CREATE_SERVICE_REQUEST:
        return{
            ...state,
            loading:true
        }
    case CREATE_SERVICE_SUCCESS:
        return{
            loading: false,
            success:action.payload.success,
            service:action.payload.service
        }
    case CREATE_SERVICE_FAIL:
        return{
            ...state,
            error:action.payload
        }
    case CREATE_SERVICE_RESET:
        return{
            ...state,
            success:false
        }
    case CLEAR_ERRORS:
        return{
            ...state,
            error:null
        }
    default:
        return state
}

}

ACTIONS

//crear un servicio ADMIN
export const newService=(serviceData)=>async(dispatch)=>{
    try {
        dispatch({type: CREATE_SERVICE_REQUEST})
        const config={
            header:{'Content-Type':'application/json'}
        }
        const {data}=await axios.post('/api/services/nuevo',serviceData,config)
        
        dispatch({
                type: CREATE_SERVICE_SUCCESS,
                payload:data,
            })
        return data
    } catch (error) {
        dispatch({
            type: CREATE_SERVICE_FAIL,
            payload: error.response.data.message
        })
    }
}

CONSTANTS

export const CREATE_SERVICE_REQUEST="CREATE_SERVICE_REQUEST"
export const CREATE_SERVICE_SUCCESS="CREATE_SERVICE_SUCCESS"
export const CREATE_SERVICE_RESET="CREATE_SERVICE_RESET"
export const CREATE_SERVICE_FAIL="CREATE_SERVICE_SUCCESS"
2
  • Como mencionas se genera un nuevo selector que lo que hace es devolver el state de tu initialState en tu redux, si puedes compartir tu archivo de redux te podríamos ayudar mejor. Commented el 1 mar. 2023 a las 3:43
  • Hola como estas @UrielCisneros Te agradeceria muchisimo llevo unos diitas y nada que le encuentro la vuelta.. Ahi edite con el codigo de reducer y actions quienes son los que reciben la info pero no se como llevarla al fronted. Porfa ayudame Commented el 7 mar. 2023 a las 23:25

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.