The JS Arrow-function

I’ve been using Redux-Thunk for a while now, since most of the front-front end work that I do is in React, and most of them needs to perform side-effects every now and then.

What Redux-Thunk does is it integrates a layer of middleware between our action creator and store, and performs those side-effects there. When our store gets the action, it just gets a payload from those side-effects.

To use it, essentially we just declare a function that returns another function called with the dispatch object. Usually, that looks like this:

function getUser(id) {
  return function(dispatch) {
    // get user by performing side-effect to call an API
    
    dispatch({
      type: "SET_USER", 
      payload: user
    });
  }
}

I’ve been aware of how we can use the short-hand arrow-functions to implicitly bind ‘this’ and concise our code, but this week, I learnt that it can also be chained like this:

const getUser = id => dispatch => {
  // get user by performing side-effect to call an API
    
  dispatch({
    type: "SET_USER", 
    payload: user
  });
};

I thought that was pretty neat, especially to use in Redux-Thunk. Using it with async/await makes for even more concise JS too!