Me gustaría ver ejemplos de como se implementa redux en react.
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.