Request async Redux Sauce using Redux-thunk

Asked

Viewed 632 times

1

Good afternoon guys, all right? I need help with actions on reduxsauce when it is a request async. The problem that the action needs to wait for the file to be solved, you need to use the Redux-thunk for Answer to generate another sucess action. But thunck does not work with reduxsauce and so I made a new middleware based on thunck.

function createThunkMiddleware(extraArgument) {
    return ({ dispatch, getState }) => next => action => {
        if (typeof action === 'function') {
            return action(dispatch, getState, extraArgument);
        }else if(typeof action === 'object'){
            action.dispatch = dispatch;
            return next(action);
        }
        return next(action);
    };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

With this I solved the problem of having Dispatch in the action, but I can’t call there in Sauce’s Redux another action with Dispatch. Follow my attempt and my complete Redux.

import { createReducer, createActions } from 'reduxsauce'
import HttpClient from '../../../utils/HttpClient'
import {queryString} from '../../../utils/helpers'

//actions
const { Types, Creators } = createActions({
    success: null,
    add: null,
    list: ['endPoint'],
    delete: ['value'],
    edit: ['value']
})

export const GridTypes = Types
export default Creators

//reducers
export const INITIAL_STATE = {
    payload: [],
    page: 1,
    pages: 1,
    total: 0,
    orderBy: "",
    direction: "keyboard_arrow_down",
    active: ""
}

export const success = (state,action) => {
    console.log(state,action,":)");
    return state;
}

export const list = (state,action) => {
    let queryStrParams = {
        "page": state.page
    }
    if (state.orderBy !== "") queryStrParams["orderBy"] = state.orderBy;
    let endPoint = `${action.endPoint}?${queryString(queryStrParams)}`;
    return HttpClient.get(endPoint)
        .then(payload => {
            let setState = Object.assign({},state,{
                payload: payload.result,
                total: payload.total,
                pages: payload.pages
            });
            return setState
        }).catch(error => console.log(error));
}


export const alter = (state,action) => {
    return Object.assign({}, state,action.value);
}

export const add = (state,action) => {
    let errorVal = Object.assign({}, state);
    errorVal.valid = false;
    errorVal.erros.push(action.value);
    return errorVal;
}

export const del = (state,action) => {
    let errorDel = Object.assign({}, state);
    errorDel.erros.splice(action.value, 1);
    errorDel.valid = errorDel.erros.length === 0;
    return errorDel;
}

export const GridReducer = createReducer(
    INITIAL_STATE, {
        [Types.SUCCESS]: success,
        [Types.LIST]: list,
        [Types.EDIT]: alter,
        [Types.ADD]: add,
        [Types.DELETE]: del
    })

I need to call the SUCCESS in the LIST after resolving the backend return template. I tried this and it was not.

action.dispatch(success()) e action.dispatch(Creators.success())

I did not succeed! If you can help me how to call another action within the Redux thank you. Thank you.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.