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.