Redux response after another action

Question

I have an async action that retrieves data from a REST API:

export const list = (top, skip) => dispatch => { dispatch({ type: 'LIST.REQUEST' }); $.get(API_URL, { top: top, skip: skip }) .done((data, testStatus, jqXHR) => { dispatch({ type: 'LIST.SUCCESS', data: data }); }); }; 

A synchronization that changes the state of skip :

 export const setSkip = (skip) => { return { type: 'LIST.SET_SKIP', skip: skip }; }; 

The initial state for top = 10, skip = 0 . In component:

 class List extends Component { componentDidMount() { this.list(); } nextPage() { let top = this.props.list.top; let skip = this.props.list.skip; // After this this.props.onSetSkip(skip + top); // Here skip has previous value of 0. this.list(); // Here skip has new value of 10. } list() { this.props.List(this.props.list.top, this.props.list.skip); } render () { return ( <div> <table> ... </table> <button onClick={this.nextPage.bind(this)}>Next</button> </div> ); } } 

When you click Next , clicking the skip button using an asynchronous action does not change. How can I send an action after synchronization ?

Answer 1

Thanks for the answers, but I did it like this:

 let top = this.props.list.top; let skip = this.props.list.skip; let newSkip = skip + top; this.props.onList(top, newSkip); this.props.onSetSkip(newSkip); 

First, I compute a new skip and post an asynchronous action with this new value. Then I submit a syns action that updates the skip in state.

Answer 2

Instead of sending an action after a synchronization action, can you just call the function from the reducer?

So this follows the thread:

Synchronize action → call gearbox ---> case function (gearbox) ---> case function (gearbox)

Instead of the usual thread, which is probably for you:

Synchronize call call → call reducer

Follow this guide to split gearboxes up to find out which gearboxes are occurring.

If the action you want to send has side effects, but then the correct way is to use Thunks, and then you can send the action after the action.

Example for Thunks :

 export const setSkip = (skip) => { return (dispatch, getState) => { dispatch(someFunc()); //Do someFunc first then this action, use getState() for currentState if you want return { type: 'LIST.SET_SKIP', skip: skip }; } }; 

Answer 3

If you use redux thunk , you can easily combine them. This is a middleware that allows action creators to return a function instead of an action.

Your solution may have worked for you now, if you do not need to bind the creators of the action and only need to run both of them.

 this.props.onList(top, newSkip); this.props.onSetSkip(newSkip); 

If you need a chain (calling them synchronously) or waiting for action from the first data sent, this is what I would recommend.

 export function onList(data) { return (dispatch) => { dispatch(ONLIST_REQUEST()); return (AsyncAPICall) .then((response) => { dispatch(ONLIST_SUCCESS(response.data)); }) .catch((err) => { console.log(err); }); }; } export function setSkip(data) { return (dispatch) => { dispatch(SETSKIP_REQUEST()); return (AsyncAPICall(data)) .then((response) => { dispatch(SETSKIP_SUCCESS(response.data)); }) .catch((err) => { console.log(err); }); }; } export function onListAndSetSkip(dataForOnList) { return (dispatch) => { dispatch(onList(dataForOnList)).then((dataAfterOnList) => { dispatch(setSkip(dataAfterOnList)); }); }; } 

Answer 4

dispatch ({type: 'LIST.SUCCESS', data: data, skip: The value you want after synchronization is complete );

Answer 5

also check this redux-sequence-action