Table of Contents for

Redux in Action

Appendix. Installation

This appendix covers

• Setting up a server
• Installing axios
• Configuring Redux Thunk
• Updating the Redux DevTools

Setting up a server

Before you can start dispatching async actions, you need to do a few things:

• Install and configure json-server, a popular tool for generating REST APIs quickly. This is a Redux book after all, so you don’t want to expend too much energy writing a fully featured back end. json-server allows you to specify a set of resources (such as tasks) and creates a standard set of endpoints to use.
• Install axios, a popular AJAX library. There’s no shortage of popular AJAX libraries, including the new native browser API window.fetch, but axios is our choice due to a solid feature set and a straightforward API.
• Install and configure Redux Thunk. You’ll have to add middleware to the Redux store, which is simpler than it might sound.

Installing and configuring json-server

First things first, install json-server globally by running the following command in a terminal window:

npm install --global json-server

Next create a db.json file in the root directory and add the contents shown in the following listing.

Listing 1. db.json

{
  "tasks": [
    {
      "id": 1,
      "title": "Learn Redux",
      "description": "The store, actions, and reducers, oh my!",
      "status": "Unstarted"
    },
    {
      "id": 2,
      "title": "Peace on Earth",
      "description": "No big deal.",
      "status": "Unstarted"
    },
    {
      "id": 3,
      "title": "Create Facebook for dogs",
      "description": "The hottest new social network",
      "status": "Completed"
    }
  ]
}

Finally, start the server with the following command. Note that you’re specifying the server to run on port 3001, because the Create React App development server is already running on port 3000:

json-server --watch db.json --port 3001

That’s it! You’ll start to use each of the newly available endpoints as you add more functionality to Parsnip.

Installing axios

With a server configured, you need to install one more package, axios. axios is one of the many options for making AJAX work a bit more pleasant, and it will be your tool for making HTTP requests from the browser throughout the book. Make sure you’re in the parsnip directory and install axios using npm:

npm install axios

If you see the standard npm success output, you’re all set!

Redux Thunk

Install Redux Thunk using npm from the terminal by running the following command:

npm install redux-thunk

Add the middleware via the applyMiddleware function exported by Redux, as shown in the following listing.

Listing 2. src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';      1
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';                           2
import { tasks } from './reducers';
import App from './App';
import './index.css';

const store = createStore(
  tasks,
  applyMiddleware(thunk)                                   3
);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

• 1 Imports applyMiddleware from Redux
• 2 Imports the middleware from Redux Thunk
• 3 Applies the middleware during store creation

Before you get off to the races, there’s one more important update to make regarding the Redux DevTools.

Configuring the Redux DevTools

Now that we’ve introduced middleware, the old devToolsEnhancer function will no longer do the trick. You’ll import another method from the same DevTools library that can accommodate middleware, called composeWithDevTools, as shown in the following listing.

Listing 3. src/index.js

import { composeWithDevTools } from 'redux-devtools-extension';       1
...
const store = createStore(
  tasks,
  composeWithDevTools(applyMiddleware(thunk))                         2
);

• 1 Imports composeWith-DevTools
• 2 Wraps the apply-Middleware function

Now you’re ready to return to the action! Don’t forget to use the DevTools Chrome extension to see each action come through the system. The API story resumes in chapter 4.

Installing lodash

Install lodash, a popular functional programming library, by running the follow command:

npm install lodash

Installing Enzyme

Enzyme is a testing tool that mainly helps with React component testing. Enzyme used to require special configuration to use with Jest, but since Jest version 15, no additional configuration is required. Install Enzyme using npm:

npm install –D enzyme

Installation script

Included with the book’s source code is a bash script to get you up and running quickly. It requires you to have a few pieces of software installed before you run it:

• Git—https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
• Node/npm—https://nodejs.org/en/

For OS X and Linux, download the install.sh script, and run the following commands:

chmod +x install.sh
./install.sh

For Windows, download the install.ps1 script and look at the instructions for running PowerShell scripts (https://docs.microsoft.com/powershell/scripting/core-powershell/ise/how-to-write-and-run-scripts-in-the-windows-powershell-ise).

That’s it! The script will clone the book’s repository from GitHub, install json-server (which you’ll use beginning with chapter 4), and start a local development server from a fresh Create React App installation. This should set you up perfectly to begin coding with chapter 2.