You could implement it in the following way: using the "Ducks" file structure for redux which is a way to modularize parts of a Redux application by bundling reducers, action types and action creators together in a way that is easy to understand and port

For example:

• you create a file and call it what you want for example exampleReduxDucks inside that file you will order redux as follows: An initial state, some types, a reducer and the actions

   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 }

This is a redux file in react, the reducer is a pure function that receives the current state and an action and returns the new state.

with dispatch what you do is "dispatch" or "send" the new state through a payload and that payload will be taken by the reducer to change the previous state to the new state.