3 common approaches to side-effects in Redux apps

21 Feb 2017

Working on a Redux app of any complexity, you are almost inevitably bound to do one thing at some point: make a server request and save the results.

And the thing is, it can be a little non-obvious as to what to do in a case like this.

What is a side-effect?

The natural Redux flow is this: some action is dispatched, and as a consequence, some state is changed.

If all your Redux app could do was just to change state as the user played with it, though, would your app be particularly useful? Probably not.

Most apps need to reach out to the outside world to be useful — whether by talking to the server, accessing local storage, recording analytics events, or something else entirely.

That process of calling into the real world is what side-effects are. They are a way of bridging the pure Redux world with the outside world.

Common features of side-effects

Side-effects can happen in response to Redux actions. For example, when a user clicks “Save,” you may want to fire off an AJAX request.

Side-effects may dispatch Redux actions. Like when the save process finishes successfully, you may want to dispatch SAVE_SUCCEEDED; or when it failed, SAVE_FAILED.

They also may not dispatch anything. Some side-effects don’t need to dispatch anything: if you are doing analytics tracking based on Redux actions, you would track things in response to Redux actions, but you will not dispatch anything.

What kinds of approaches are there to handling side-effects?

There are three primary ways of performing side-effects:

(note that code snippets below are purely illustrative)

1. Inside action creators. It is pretty barebones but often is just enough. You make a smart action creator which performs your side-effect and may dispatch an action multiple times.

function fetchUser(id) {
  return dispatch => {
    dispatch({ type: 'FETCH_USER' });
    fetch('...').then(user => {
      dispatch({ type: 'FETCHED_USER' });
    }, error => {
      dispatch({ type: 'ERRORED_USER' });
    });
  };
}

Props:

Cons:

Example implementations:

2. Have some code on the side respond to user actions. Action creators are still pure, but you now have some piece of code that can listen for a specific action, perform whatever it needs to, and maybe dispatch another action.

function fetchUser(id) {
  return { type: 'FETCH_USER' };
}

// in some other place
// (pseudo-code)
when('FETCH_USER').do((dispatch) => {
  fetch('...').then(user => {
    dispatch({ type: 'FETCHED_USER' });
  }, error => {
    dispatch({ type: 'ERRORED_USER' });
  });
})

Pros:

Cons:

Example implementations:

3. Specialized middleware. Some side-effects are common enough, there exist very specific Redux middlewares. You don’t perform a fetch yourself; you don’t even have a smart action creator. Typically, you’d just dispatch a special action that has the request data, and the middleware takes care of the rest.

function fetchUser(id) {
  return {
    type: ["FETCH_USER", "FETCHED_USER", "ERRORED_USER"],
    url: '...',
  };
}

Pros:

Cons:

Example implementations:

Now, there also are other approaches, but these three are the most common.

What should I go with?

There is no universally correct answer to that question.

It always boils down to your needs, requirements, and preferences.

If you are a beginner, smart action creators are the easiest to start with. They are obvious and, to a large extent, there are no surprises.

However, your actions creators will get more verbose, and your logic will get very coupled as your requirements grow.

Specialized middlewares can be an okay replacement for smart action creators if your logic is very simple. They also can be used in conjunction with the “code on the side” approach.

“Code on the side” techniques are more flexible because they allow you to listen to specific actions and react accordingly. Several pieces of code can react to the same action — and they don’t have to know about each other, the action creator doesn’t have to know about them, too.

For example, when SAVE is dispatched, you may want to send a server request, but you may also decide to track this event to analytics. You can have an analytics file which listens to various Redux actions and tracks things. And at the same time, you can have an API file which listens to various Redux actions and sends requests. And the two are not coupled in any way.

Try one implementation from every category to understand them in a practical setting, and to see how you feel about these.

Think your friends would dig this article, too?

Google+
Tumblr

Want to level up your React skills?

Sign up below and I'll send you articles just like this about React straight to your inbox every week or so.

No spam, promise. I hate it as much as you do!

, enjoying the article? Now think of 3 friends who are interested in React, Redux and would be into it, and share the link with them! 👇

https://goshakkk.name/redux-side-effect-approaches/