Learning Redux

Problems with our previous solution

While our simple solution with the array and the index worked fine for a simple undo/redo implementation, it will have undesired behavior in more complex situations.

For example, if we do three increment actions, our state would be this:

{  history: [0, 1, 2, 3],  currentState: 3}

Then, we undo it two times:

{  history: [0, 1, 2, 3],  currentState: 1}

Now, when we do another increment action, the new state will get pushed to the end, messing up the history:

{  history: [0, 1, 2, 3, 2],  currentState: 4}

If we undo this again now, we will switch the counter from 2 to 3, not back to 1 (which would be the expected behavior). By simply going through the history by index, we are losing track of the past and future ...