Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

175
Vistas
¿Como se podria implementar redux en React?

Me gustaría ver ejemplos de como se implementa redux en react.

over 4 years ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

Podrías implementarlo de la siguiente manera: utilizando la estructura de archivos "Ducks" para redux que es una forma de modularizar partes de una aplicación de Redux juntando reducers, tipos de acciones y creadores de acciones juntos de una forma fácil de entender y portar

Por ejemplo:

  • creas un archivo y llámalo como desees por ejemplo exampleReduxDucks dentro de ese archivo ordenaras redux de la siguiente manera: Un estado inicial, unos types, un reducer y las acciones

    import axios from "axios"
    
    //initial state
    
    const initialState = {
        list: [],
        fetching: false
    }
    
    const API = process.env.REACT_APP_API_REST
    
    
    //types
    const GET_SUCCESS_REGISTER = 'GET_SUCCESS_REGISTER'
    const RUNNING = 'RUNNING'
    
    
    
    //reducer
    const reducer = (state = initialState, action) => {
        switch (action.type) {
            case RUNNING:
                return {
                    ...state,
                    fetching: true
                }
            case GET_SUCCESS_REGISTER:
                return {
                    ...state,
                    list: action.payload,
                    fetching: false
                }
            default:
                return state
        }
    }
    
    export default reducer
    
    
    //actions
    
    export const sendDataRegisterAction = (bodyData) => async (dispatch) => {
    
        dispatch({
            type: RUNNING
        })
    
        const totalData = await new Promise((dataReturn, errorReturn) => {
            axios({
                method: 'POST',
                url: `${API}/users/user/`,
                headers: { "Content-Type": "application/json" },
                data: bodyData
            })
            .then(res => {
                dataReturn(res.status)
                dispatch({
                    type: GET_SUCCESS_REGISTER,
                    payload: res.data
                })
            })
            .catch(error => {
                console.log(error.response.data.message)
                errorReturn(error.response.data.message)
            })
        })
        return totalData
    }

Esto es un archivo redux en react, el reducer es una función pura que recibe el estado actual y una acción y devuelve el nuevo estado.

con dispatch lo que haces es "despachar" o "enviar" el nuevo estado mediante un payload y ese payload lo tomara el reducer para cambiar el estado anterior al nuevo estado.

over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda