Learn redux-optimist
Tags: redux, react, javascript, optimistic
Published: 2019-12-14 21:06:56

---
title: Learn redux-optimist
published: true
date: 2019-12-14 19:50:13 UTC
tags: redux,react,javascript,optimistic
canonical_url: https://medium.com/@robghchen/learn-redux-optimist-ca1a41a82165
---

Simplify optimistic rendering with redux-optimist library

[![](https://cdn-images-1.medium.com/max/1616/1*lfZHSaNa6ViCsNxIpwGurA.gif)](https://medium.com/@robghchen/learn-redux-optimist-ca1a41a82165?source=rss-1a2b6738cba4------2)

The redux-optimist library has been extremely helpful to me and I’d like to share that with you. I’ve designed a simple tutorial where I’ll walk you through how to set up and use the middleware. We’re going to use a sweet pokemon API as our demo practice. We’ll fetch this Pikachu and optimistically evolve it to Raichu. If the request fails, then we’ll devolve back to Pikachu.

1) Let’s install the dependencies we need, in your terminal:
`yarn create react-app app-name`
`cd app-name`
`yarn add react-dom`
`yarn add react-router-dom`
`yarn add react-redux`
`yarn add redux`
`yarn add redux-thunk`
`yarn add lodash`

2) Follow along to set up Redux, or skip ahead to step 3 if you have your own preferred redux setup.

a. `open src/index.js`

{% gist https://gist.github.com/robghchen/cbbdf5334f36097a1385cf824f46d40a %}

b. create action file, in your terminal: `touch src/pokemonActions.js && open src/pokemonActions.js`

{% gist https://gist.github.com/robghchen/49e4ba298128b90f9e910efbee036ceb %}

c. create reducer file, in your terminal: `touch src/reducer.js && open src/reducer.js`

{% gist https://gist.github.com/robghchen/ba71d43de1be4a98320e2ee4dd83eb21 %}

d. `open src/App.js`

{% gist https://gist.github.com/robghchen/34ce8d7b0141e3225caaf8c217566f57 %}

e. `open src/App.css`

{% gist https://gist.github.com/robghchen/a477cf158d4e2f18c8f89653be912611 %}

3) Let’s install redux-optimist now, in your terminal:
`yarn add redux-optimist`

4) I suggest commiting here, that way you can see your git diff before implementing `redux-optimist` and after `redux-optimist`:
`git add . && git commit -m "feat(redux): finished setting up redux"`

5) Modify our `pokemonActions.js` to create new actions and pass some responsibility to the `redux-optimist` library:

{% gist https://gist.github.com/robghchen/1e06072c877b31bfa5028d590717ba78 %}

6) Create a `middleware` folder and create this file `getRaichu.js` inside the folder, in your terminal: `mkdir src/middleware && touch src/middleware/getRaichu.js && open src/middleware/getRaichu.js`

{% gist https://gist.github.com/robghchen/92dc5a6ffd2f6c1e2d7d5c2571e0d1a1 %}

7) Import and use the `getRaichu.js` middleware in our `index.js`:

{% gist https://gist.github.com/robghchen/0fb6c00560a9f2f673e8c8de0d5f8178 %}

8) Modify our reducer.js to work with the new actions and middleware:

{% gist https://gist.github.com/robghchen/1047333984b095e691ff6f68b8274a8a %}

9) Now in your terminal, `yarn start` and open up your console. I’ve placed a couple `console.log` to help observe the procedure of our action, middleware, and reducer.

![GET_RAICHU_COMPLETE](https://miro.medium.com/max/6720/1*ha6OEjZuWhUCXlVRpqNnGw.gif)

You’ll notice that the object in `GET_RAICHU_BEGIN` is a mock Raichu where I only supplied the name and image, then when the request succeeds, `GET_RAICHU_COMPLETE` sends the full object returned from the API to update our store.

10) Now let’s imitate a failed request by commenting out the fetch request on line 32 in `getRaichu.js` and commenting in line 33.

![GET_RAICHU_FAILED](https://miro.medium.com/max/6720/1*hgAma4RZeIuJdhxVvTr1Vg.gif)

This time you will see that we optimistically render Raichu until the request comes back as a fail. The store will automatically revert back to Pikachu. At this time we also capture the error from the failed request and display it to the user. So moral of the story, don’t evolve your Pikachu :)

<hr/>

Here are screenshots of the git diff from our usual `redux` to implementing `redux-optimist`:

![index.js diff](https://thepracticaldev.s3.amazonaws.com/i/ldvdrxpcr5v2u283hw20.png)
![pokemonActions.js diff](https://thepracticaldev.s3.amazonaws.com/i/f1nka7mmnzhglzbgwn2e.png)
![getRaichu.js diff](https://thepracticaldev.s3.amazonaws.com/i/b2jrzk54k56vfn25vrm0.png)
![reducer.js diff](https://thepracticaldev.s3.amazonaws.com/i/xrz09k3rinto8a2zinno.png)


That’s it for optimistic rendering with the redux-optimist library! Hope this was helpful!

---

Bring your friends and come learn JavaScript in a fun never before seen way! [waddlegame.com](https://waddlegame.com)