Question on the order of actions, especially async actions.

[kwangkim]

I am a beginner of redux and I still do not understand how to manage the order of actions.

Let A be a pure action which requests to add 1 to a state. And B be an async action which requests to multiply 2 with the same state after 5 seconds.
If the initial state is 2 and I send the action B and A immediately, I expect that the state is 5 since 2*2+1=5.
But my code in Github which is slightly modified from the count example shows 6, which means that the store handled A first instead of B.
I installed it in http://redux-kwangkim.c9.io/
(It may not work, since I am using a free account and they close VM of free accounts frequently.)

//Action
export function multiplicationby2() {
  return {
    type: MULTIPLICATIONBY2_COUNTER
  };
}
export function multiplicationby2Async(delay = 3000) {
  return dispatch => {
    setTimeout(() => {
      dispatch(multiplicationby2());
    }, delay);
  };
}

//Reducer
import { INCREMENT_COUNTER, DECREMENT_COUNTER, MULTIPLICATIONBY2_COUNTER } from '../actions/counter';

export default function counter(state = 0, action) {
  switch (action.type) {
  case INCREMENT_COUNTER:
    return state + 1;
  case DECREMENT_COUNTER:
    return state - 1;
  case MULTIPLICATIONBY2_COUNTER:
    return state*2;  
  default:
    return state;
  }
}

Could you help me to fix my mistake?
Thank you.

[gaearon]

1. Press "+" two times
2. Press "Multiplication by 2 async" once
3. Press "Increment async"

I get 5 as a result.
Please reopen if you can provide exact steps to reproduce.

[kwangkim]

In 3, Press "+". (Since Action A is pure.)

[gaearon]

See async flow. Thunk middleware lets you emit async actions, but they are dispatched synchronously. There is no "action queue". So if you first dispatch { type: 'INCREMENT' }, and then thunk dispatches { type: 'MULTIPLICATIONBY2_COUNTER' } from a callback, they are going to occur in that exact order.

If you'd like to queue actions until the async action is resolved, you'd need to implement a custom mechanism for that. It's not hard: you'd just accumulate actions in an array in your reducer's state until you feel it's time to use them, at which point you call actions.reduce. We don't have a built-in example of that, but hope it helps.

[kwangkim]

Now I understand it.
Basically, the orders of actions are determined by the time when a program dispatches (async) actions, not by the time when (async) actions are created.
Am I right?

I have another question regarding middlewares.
I will post it as a separate question.

Thank you very much for your advice.

[gaearon]

Yes, only the final dispatch order is relevant.