How to handle complex side-effects in Redux?

Question

I\'ve been struggling for hours to finding a solution to this problem...

I am developing a game with an online scoreboard. The player can log in and log out at any t

Answer 1

Edit: there now a redux-saga project inspired by these ideas

Here are some nice resources

• Comparison of Redux-saga and Redux-thunk
• Redux-saga vs Redux-thunk with async/await
• Managing processes in Redux Saga
• From actionsCreators to Sagas
• Snake game implemented with Redux-saga

---

Flux / Redux is inspired from backend event stream processing (whatever the name is: eventsourcing, CQRS, CEP, lambda architecture...).

We can compare ActionCreators/Actions of Flux to Commands/Events (terminology usually used in backend systems).

In these backend architectures, we use a pattern that is often called a Saga, or Process Manager. Basically it is a piece in the system that receives events, may manage its own state, and then may issue new commands. To make it simple, it is a bit like implementing IFTTT (If-This-Then-That).

You can implement this with FRP and BaconJS, but you can also implement this on top of Redux reducers.

function submitScoreAfterLoginSaga(action, state = {}) {  
  switch (action.type) {

    case SCORE_RECORDED:
      // We record the score for later use if USER_LOGGED_IN is fired
      state = Object.assign({}, state, {score: action.score}

    case USER_LOGGED_IN: 
      if ( state.score ) {
        // Trigger ActionCreator here to submit that score
        dispatch(sendScore(state.score))
      } 
    break;

  }
  return state;
}

To make it clear: the state computed from reducers to drive React renderings should absolutly stay pure! But not all state of your app has the purpose of triggering renderings, and this is the case here where the need is to synchronise different decoupled parts of your app with complex rules. The state of this "saga" should not trigger a React rendering!

I don't think Redux provide anything to support this pattern but you can probably implement it by yourself easily.

I've done this in our startup framework and this pattern works fine. It permits us to handle IFTTT things like:

• When user onboarding is active and user close Popup1, then open Popup2, and display some hint tooltip.

• When user is using mobile website and opens Menu2, then close Menu1

IMPORTANT: if you are using undo/redo/replay features of some frameworks like Redux, it is important that during a replay of an event log, all these sagas are unwired, because you don't want new events to be fired during the replay!