Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

181
Views
¿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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!