Simplify optimistic rendering with redux-optimist library

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 

. If the request fails, then we’ll devolve back to Pikachu.

<h1 data-node-type="titlePlaceholder">Learn redux-optimist</h1><blockquote><p>Simplify optimistic rendering with redux-optimist library</p></blockquote><figure class="photo figure-position-null"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20191216043701666_1_NCFdKzR5wdql17n0pfKZXQ.png" attachmentid="a40be4b6-13a9-4bc2-a865-ef17b3e0775e" contenteditable="false" data-width="1920" data-height="1053"><div></div></figure><p><br>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 <a href="https://pokeapi.co/api/v2/pokemon/pikachu/" rel="noopener noreferrer nofollow">Pikachu</a> and optimistically evolve it to <a href="https://pokeapi.co/api/v2/pokemon/raichu/" rel="noopener noreferrer nofollow">Raichu</a>. If the request fails, then we’ll devolve back to Pikachu.</p><ol><li><p>Let’s install the dependencies we need, in your terminal:</p><p><code>yarn create react-app app-name<br>cd app-name<br>yarn add react-dom<br>yarn add react-router-dom<br>yarn add react-redux<br>yarn add redux<br>yarn add redux-thunk<br>yarn add lodash<br></code></p></li><li><p>Follow along to set up Redux, or skip ahead to step 3 if you have your own preferred redux setup.<br>a. <code>open index.js</code></p><p></p><div data-remotecodeblock="true" class="cm-remoteCodeBlock"><div data-codeeditordecorations="true"></div><textarea data-iscodemirror="true" data-uniqueid="cm-nDXAR" id="cm-nDXAR">import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { createStore, applyMiddleware, compose } from 'redux';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import thunk from 'redux-thunk';
import rootReducer from './reducer';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
	rootReducer,
	composeEnhancers(applyMiddleware(thunk))
);

ReactDOM.render(
	&lt;Provider store={store}&gt;
		&lt;BrowserRouter&gt;
			&lt;App /&gt;
		&lt;/BrowserRouter&gt;
	&lt;/Provider&gt;,
	document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();</textarea></div><p><br>b. create action file, in your terminal: <code>touch src/pokemonActions.js &amp;&amp; open src/pokemonActions.js</code></p><p></p><div data-remotecodeblock="true" class="cm-remoteCodeBlock"><div data-codeeditordecorations="true"></div><textarea data-iscodemirror="true" data-uniqueid="cm-oMQAE" id="cm-oMQAE">export const GET_PIKACHU = 'GET_PIKACHU';
export const GET_RAICHU = 'GET_RAICHU';
export const GET_RAICHU_FAILED = 'GET_RAICHU_FAILED';

export const getPikachu = () =&gt; {
	return dispatch =&gt; {
		return fetch('https://pokeapi.co/api/v2/pokemon/pikachu/')
			.then(res =&gt; res.json())
			.then(pikachu =&gt; {
				dispatch({
					type: GET_PIKACHU,
					payload: { pokemon: pikachu }
				});
			})
			.catch(console.error);
	};
};

export const getRaichu = () =&gt; {
	return dispatch =&gt; {
		setTimeout(() =&gt; {
			return fetch('https://pokeapi.co/api/v2/pokemon/raichu/')
				.then(res =&gt; res.json())
				.then(raichu =&gt; {
					dispatch({
						type: GET_RAICHU,
						payload: { pokemon: raichu }
					});
				})
				.catch(error =&gt; {
					dispatch({
						type: GET_RAICHU_FAILED,
						payload: { error }
					});
				});
		}, 1000);
	};
};</textarea></div><p><br>c. create reducer file, in your terminal: <code>touch src/reducer.js &amp;&amp; open src/reducer.js</code></p><p></p><div data-remotecodeblock="true" class="cm-remoteCodeBlock"><div data-codeeditordecorations="true"></div><textarea data-iscodemirror="true" data-uniqueid="cm-LEjug" id="cm-LEjug">import { GET_PIKACHU, GET_RAICHU, GET_RAICHU_FAILED } from './pokemonActions';

const initialState = { pokemon: [] };

const reducer = (state = initialState, action) =&gt; {
	switch (action.type) {
		case GET_PIKACHU:
		case GET_RAICHU: {
			return { ...state, pokemon: action.payload.pokemon };
		}
		case GET_RAICHU_FAILED: {
			return { ...state, error: action.payload.error };
		}
		default:
			return state;
	}
};

export default reducer;</textarea></div><p><br>d. <code>open App.js</code></p><p></p><div data-remotecodeblock="true" class="cm-remoteCodeBlock"><div data-codeeditordecorations="true"></div><textarea data-iscodemirror="true" data-uniqueid="cm-auNlC" id="cm-auNlC">import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { get } from 'lodash';

import { getPikachu, getRaichu } from './pokemonActions';
import './App.css';

class App extends React.Component {
	componentDidMount() {
		const { getPikachu } = this.props;
		getPikachu();
	}

	renderStartOverButton() {
		const { pokemon, getPikachu } = this.props;

		const pokemonName = get(pokemon, 'forms[0].name');

		if (pokemonName === 'pikachu') {
			return null;
		}
		return (
			&lt;div className="start-over-button"&gt;
				&lt;button onClick={getPikachu}&gt;Start Over&lt;/button&gt;
			&lt;/div&gt;
		);
	}

	renderError() {
		const { error } = this.props;

		if (!error) {
			return null;
		}

		return (
			&lt;h6 className="error"&gt;{`${error}, pikachu doesn't want to evolve!`}&lt;/h6&gt;
		);
	}

	render() {
		const { pokemon, getRaichu, error } = this.props;

		const pokemonImg = get(pokemon, 'sprites.front_default');

		if (!pokemonImg &amp;&amp; !error) {
			return &lt;div&gt;Loading . . .&lt;/div&gt;;
		}

		const pokemonName = get(pokemon, 'name');
		let message = (
			&lt;span&gt;
				&lt;p&gt;Click to evolve&lt;/p&gt;
				&lt;img
					src="https://cdn.bulbagarden.net/upload/thumb/e/e7/Thunder_Stone_BW135.png/250px-Thunder_Stone_BW135.png"
					className="thunder-stone"
					alt="thunder-stone"
				&gt;&lt;/img&gt;
			&lt;/span&gt;
		);
		let animationClass = '';

		if (pokemonName === 'raichu') {
			message = &lt;p&gt;Congrats on your new Raichu!&lt;/p&gt;;
			animationClass = 'grow';
		}

		return (
			&lt;div className="container"&gt;
				{this.renderStartOverButton()}
				&lt;div onClick={getRaichu}&gt;
					&lt;img
						src={pokemonImg}
						className={animationClass}
						alt="pokemon"
					/&gt;
					&lt;h6&gt;{message}&lt;/h6&gt;
				&lt;/div&gt;
				{this.renderError()}
			&lt;/div&gt;
		);
	}
}

const mapStateToProps = state =&gt; {
	return {
		pokemon: state.pokemon,
		error: state.error
	};
};

const mapDispatchToProps = dispatch =&gt; {
	return {
		getPikachu: bindActionCreators(getPikachu, dispatch),
		getRaichu: bindActionCreators(getRaichu, dispatch)
	};
};

export default connect(mapStateToProps, mapDispatchToProps)(App);</textarea></div><p><br>e. <code>open App.css</code></p><p></p><div data-remotecodeblock="true" class="cm-remoteCodeBlock"><div data-codeeditordecorations="true"></div><textarea data-iscodemirror="true" data-uniqueid="cm-FnUfk" id="cm-FnUfk">.container {
	background-color: #282c34;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: calc(10px + 2vmin);
	color: white;
	text-align: center;
}

.start-over-button,
.error {
	position: absolute;
	top: 60%;
}

.error {
	font-size: 0.5em;
	color: red;
}

.grow {
	animation: grow 0.5s ease;
}

.thunder-stone {
	width: 50px;
}

@keyframes grow {
	from {
		transform: scale(0);
	}
	to {
		transform: scale(1);
	}
}</textarea></div><p></p></li><li><p>Let’s install redux-optimist now, in your terminal:<br><code>yarn add redux-optimist<br></code></p></li><li><p>I suggest commiting here, that way you can see your git diff before implementing <code>redux-optimist</code> and after <code>redux-optimist</code>:<br><code>git add . &amp;&amp; git commit -m "feat(redux): finished setting up redux"<br></code></p></li><li><p>Modify our <code>pokemonActions.js</code> to create new actions and pass some responsibility to the <code>redux-optimist</code> library:</p><p></p><div data-remotecodeblock="true" class="cm-remoteCodeBlock"><div data-codeeditordecorations="true"></div><textarea data-iscodemirror="true" data-uniqueid="cm-2DekM" id="cm-2DekM">export const GET_PIKACHU = 'GET_PIKACHU';
export const GET_RAICHU = 'GET_RAICHU';
export const GET_RAICHU_BEGIN = 'GET_RAICHU_BEGIN'; // new action
export const GET_RAICHU_COMPLETE = 'GET_RAICHU_COMPLETE'; // new action
export const GET_RAICHU_FAILED = 'GET_RAICHU_FAILED';

export const getPikachu = () =&gt; {
	return dispatch =&gt; {
		return fetch('https://pokeapi.co/api/v2/pokemon/pikachu/')
			.then(res =&gt; res.json())
			.then(pikachu =&gt; {
				console.log('getPikachu(), dispatch GET_PIKACHU');
				dispatch({
					type: GET_PIKACHU,
					payload: { pokemon: pikachu }
				});
			})
			.catch(console.error);
	};
};

export const getRaichu = () =&gt; {
	return dispatch =&gt; {
		console.log('getRaichu(), dispatch GET_RAICHU');
		dispatch({
			type: GET_RAICHU // let middleware take it from here, we're going to create a file that receives this action
		});
	};
};</textarea></div><p></p></li><li><p>Create a <code>middleware</code> folder and create this file <code>getRaichu.js</code> inside the folder, in your terminal: <code>mkdir src/middleware &amp;&amp; touch src/middleware/getRaichu.j &amp;&amp; open src/middleware/getRaichu.js</code></p><div data-remotecodeblock="true" class="cm-remoteCodeBlock"><div data-codeeditordecorations="true"></div><textarea data-iscodemirror="true" data-uniqueid="cm-KJDBo" id="cm-KJDBo">import { BEGIN, COMMIT, REVERT } from 'redux-optimist';
import {
	GET_RAICHU,
	GET_RAICHU_BEGIN,
	GET_RAICHU_COMPLETE,
	GET_RAICHU_FAILED
} from '../pokemonActions';

let nextTransactionID = 0;
export default function(store) {
	return next =&gt; action =&gt; {
		if (action.type !== GET_RAICHU) {
			return next(action);
		}
		let transactionID = nextTransactionID++;
		const raichu = {
			name: 'raichu',
			sprites: {
				front_default:
					'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/26.png'
			}
		};
		console.log('GET_RAICHU_BEGIN');
		next({
			type: GET_RAICHU_BEGIN,
			payload: { pokemon: raichu, error: '' },
			optimist: { type: BEGIN, id: transactionID }
		});

		setTimeout(() =&gt; {
			// toggle fetch for successful or failed request
			fetch('https://pokeapi.co/api/v2/pokemon/raichu/')
				// fetch('https://pokeapifailedrequest.co/api/v2/pokemon/raichu/')
				.then(res =&gt; res.json())
				.then(raichu =&gt; {
					console.log('GET_RAICHU_COMPLETE');
					next({
						type: GET_RAICHU_COMPLETE,
						payload: { pokemon: raichu, error: '' },
						optimist: { type: COMMIT, id: transactionID }
					});
				})
				.catch(error =&gt; {
					console.log('GET_RAICHU_FAILED');
					next({
						type: GET_RAICHU_FAILED,
						payload: { error: error.message },
						optimist: { type: REVERT, id: transactionID }
					});
				});
		}, 1000); // simulate a request that takes 1 second
	};
}</textarea></div><p></p></li><li><p>Import and use the <code>getRaichu.js</code> middleware in our <code>index.js</code>:</p><div data-remotecodeblock="true" class="cm-remoteCodeBlock"><div data-codeeditordecorations="true"></div><textarea data-iscodemirror="true" data-uniqueid="cm-ht7MJ" id="cm-ht7MJ">import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { createStore, applyMiddleware, compose } from 'redux';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import thunk from 'redux-thunk';
import rootReducer from './reducer';
import getRaichu from './middleware/getRaichu'; // import middleware file

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
	rootReducer,
	composeEnhancers(applyMiddleware(thunk, getRaichu)) // use middleware file we created
);

ReactDOM.render(
	&lt;Provider store={store}&gt;
		&lt;BrowserRouter&gt;
			&lt;App /&gt;
		&lt;/BrowserRouter&gt;
	&lt;/Provider&gt;,
	document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();</textarea></div><p></p></li><li><p>Modify our <code>reducer.js</code> to work with the new actions and middleware:</p><div data-remotecodeblock="true" class="cm-remoteCodeBlock"><div data-codeeditordecorations="true"></div><textarea data-iscodemirror="true" data-uniqueid="cm-3vhPd" id="cm-3vhPd">import optimist from 'redux-optimist';
import {
	GET_PIKACHU,
	GET_RAICHU_BEGIN, // new action
	GET_RAICHU_COMPLETE, // new action
	GET_RAICHU_FAILED
} from './pokemonActions';

const initialState = { pokemon: [], error: '' };

const reducer = (state = initialState, action) =&gt; {
	switch (action.type) {
		case GET_PIKACHU: {
			console.log('GET_PIKACHU');
			return { ...state, pokemon: action.payload.pokemon };
		}
		case GET_RAICHU_BEGIN: {
			// optimistically update store immediately
			console.log('GET_RAICHU_BEGIN:', action.payload);
			return {
				...state,
				pokemon: action.payload.pokemon,
				error: action.payload.error
			};
		}
		case GET_RAICHU_COMPLETE: {
			// really update store if request succeeds
			console.log('GET_RAICHU_COMPLETE:', action.payload);
			return {
				...state,
				pokemon: action.payload.pokemon,
				error: action.payload.error
			};
		}
		case GET_RAICHU_FAILED: {
			// remove what was optimistically updated to the store if request fails and save the error to the store instead
			console.log('GET_RAICHU_FAILED:', action.payload);
			return { ...state, error: action.payload.error };
		}
		default:
			return state;
	}
};

export default optimist(reducer);</textarea></div><p></p></li><li><p>Now in your terminal, <code>yarn start</code> and open up your console. I’ve placed a couple <code>console.log</code> to help observe the procedure of our action, middleware, and reducer.</p><p></p><figure class="photo figure-position-hang"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20191216043515855_1_ha6OEjZuWhUCXlVRpqNnGw.gif" attachmentid="c951d609-7f01-49bb-a16e-e5e94cafacbe" contenteditable="false" data-width="3360" data-height="1432"><div></div></figure><p><em><br></em>You’ll notice that the object in <code>GET_RAICHU_BEGIN</code> is a mock Raichu where I only supplied the name and image, then when the request succeeds, <code>GET_RAICHU_COMPLETE</code> sends the full object returned from the API to update our store.<br></p></li><li><p>Now let’s imitate a failed request by commenting out the fetch request on line 32 in <code>getRaichu.js</code> and commenting in line 33.<br></p><figure class="photo figure-position-hang"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20191216043546950_1_hgAma4RZeIuJdhxVvTr1Vg.gif" attachmentid="c92cd552-292a-43d9-807a-404b98a5eab1" contenteditable="false" data-width="3360" data-height="1514"><div></div></figure><p><br>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 :)<br><br>---<br><br>Here are screenshots of the git diff from our usual <code>redux</code> to implementing <code>redux-optimist</code>:<br></p><figure class="photo figure-position-hang"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20191221194002823_Screen%20Shot%202019-12-21%20at%202.02.53%20PM.png" attachmentid="c95076f2-f722-4e25-90d2-dc1a0ae09d24" contenteditable="false" data-width="1920" data-height="1080"><div></div></figure><figure class="photo figure-position-hang"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20191221194013539_Screen%20Shot%202019-12-21%20at%202.07.49%20PM.png" attachmentid="7480726f-3b8f-4c05-8108-1e50a617bb2e" contenteditable="false" data-width="1920" data-height="1080"><div></div></figure><p></p><figure class="photo figure-position-hang"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20191221194026038_Screen%20Shot%202019-12-21%20at%202.03.13%20PM.png" attachmentid="1fb04294-3515-4594-a9fd-646e8ee3a628" contenteditable="false" data-width="1920" data-height="1080"><div></div></figure><figure class="photo figure-position-hang"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20191221194102298_Screen%20Shot%202019-12-21%20at%202.05.12%20PM.png" attachmentid="3a903900-075b-4301-a208-1bcd3d7bb70d" contenteditable="false" data-width="1920" data-height="1080"><div></div></figure><p></p><p><br>That’s it for optimistic rendering with the redux-optimist library! Hope this was helpful!</p></li></ol>

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Learn redux-optimist

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript