Request async Redux Sauce using redux-thunk

1
Good afternoon guys, how are you? I need help with actions in the reduxsauce when it is a request async. The problem that the action needs to wait for the promise to be resolved, it is necessary to use redux-thunk for the response to generate a another success action. But thunck does not work with reduxsauce and with that I made a new middleware if 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 the dispatch in the action, but I can not call there in the redux of the sauce another action with the dispatch. Here's my try and my full 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 SUCCESS in LIST after resolving the promise of backend backend. I tried it and it was not.

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

I did not succeed! If they can help me as if calling another action inside the redux thank you. Thank you.

    
asked by anonymous 20.09.2017 / 18:21

0 answers