Source:  Twitter logo

I have an async action, which fetch data from 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 sync action, which changes skip state:

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

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 button Next at first time clicked, value of skip which uses async action not changed. How I can to dispatch action after sync action?

If you are using redux thunk, you can easily combine them. It's a middleware that lets action creators return a function instead of an action.

Your solution might have worked for you now if you don't need to chain the action creators and only need to run both of them.

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

If you need chaining(calling them in a synchronous manner) or waiting from the first dispatched action's data, this is what I'd 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));
     });
  };
}
15 users liked answer #0dislike answer #015
pierreg profile pic
pierreg

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

So it follows this flow:

Sync action call --> Reducer call ---> case function (reducer) ---> case function (reducer)

Instead of the usual flow which is probably this for you:

Sync action call --> Reducer call

Follow this guide to split the reducers up to see what case reducers are.

If the action you want to dispatch has side affects though then the correct way is to use Thunks and then you can dispatch an action after an 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
        };
    }
};
5 users liked answer #1dislike answer #15
Martin Dawson profile pic
Martin Dawson

also check this out redux-sequence-action

1 users liked answer #2dislike answer #21
zarehb profile pic
zarehb

Thanks for the replies, but I made it this way:

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 calculate new skip and dispatch an async action with this new value. Then I dispatch a syns action, which updates skip in state.

0 users liked answer #3dislike answer #30
Denis Bednov profile pic
Denis Bednov

dispatch({ type: 'LIST.SUCCESS', data: data, skip: The value you want after sync action });

-1 users liked answer #4dislike answer #4-1
ryouaki profile pic
ryouaki

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).