React series — Weather App — Part 5

Photo by Fabian Grohs on Unsplash

Hi, in the last part of this serie we saw the application working, but many things is still missing. In this post I will talk about redux and middleware.

Let’s take a look at the action creator method fetchWeather. All methods should return an object with a type, which is the only required field. But in this case fetchWeather is not a pure function.

Javascript tips — Pure functions

It means if we return this object to redux flow, the reducer will receives a promise, which could be a problem. Let’s take a look at redux flow:

In our case, we are returning an object with a promise in it’s payload, so when redux dispatch directly this object to reducer without resolve the promise we need to add some code to work with it, right? But, if we add such code, our reducer become an impure function, and you don’t want this right?

beautiful pure reducer

That´s why we used redux-promise component. It’s a middleware that intercepts the redux flow and wait for promise to be resolved and then dispatch to reducer the expected value.

The key point here is the middleware, and redux-promise isn’t a good one. It’s very simple, only works for trivial cases, can’t chain operations together, there’s no way to cancel a promise and we don’t have control on how to deal with exceptions or unexpected results.

So, what is the best choice? it’s complicated to say, but the two most used are redux-thunk and redux-saga. I’ll change our action creator to use first redux-thunk and after let’s talk about the pros and cons.

Ok, install redux-thunk:

$ npm i redux-thunk

After install, go to the root index.js and change it to use ReduxThunk middleware:

Ok, the new middleware is configured, now we need to update the action creator fetchWeather to use it. The redux-thunk syntax is:

function func() {
  return dispatch => {
     // do some work here...   
     dispatch({
       type: SOME_TYPE_HERE
     });
  };
}

After make the changes our fetchWeather method looks like this:

Alright, if you run the application, everything should work as expected:

Now let’s see the pros and cons of redux-thunk:

Pros

• Easy to understand
• Uses familiar flow control constructs to deal with promises
• The logic is all in one place

Cons

• Unit testing is complicated (it’s a pure function)
• Asynchronous tests
• There is no an easy way to cancel an in-progress thunk
• No longer dispatch plain action objects

Still talking about middleware, let’s create a very simple just for log the redux flow? Go to middleware folder and create a new file called log.js.

After create the log.js, go to root index.js and configure it to use this new middleware:

Alright, now reload the page and take a look at the console:

It’s a very simple middleware, but the concept is the same for all of them. In the next part I will show how to use redux-saga and also create a more complex middleware.

Part 6: https://medium.com/@leonardobrunolima/react-series-weather-app-part-6-4ff37f4d67b9

Thanks!

gaearon/redux-thunk

redux-saga/redux-saga