Adding React/Redux to an Existing ES5 Django Web App

Part 3: Installing Redux for your Django App

This is the third part of a tutorial series that will walk you through the process of integrating React/Redux into your existing ES5 legacy Django web app. This part of the series covers the integration of Redux into our web app. You may refer to parts 1 and 2 where we setup an ES6 compiler and React respectively.

React is made even more efficient, concise and awesome with the addition of Redux, let’s start by installing it!

Installation

We are going to install Redux using our package manager npm the same way did for React.

We will want to install four libraries: redux, react-redux, redux-thunk andredux-logger

Let’s use --save-dev to add the libraries as dependencies to our package.json file which is a good habit to develop

npm install redux --save-dev
npm install react-redux --save-dev
npm install redux-thunk --save-dev
npm install redux-logger --save-dev

redux-thunk and redux-logger are both middlewares for Redux and not necessary for starting off with Redux. However both are very useful additions to redux.

redux-thunk makes it so that we can write action creators that return a function instead of an action. Then, the thunk may be used to postpone the dispatch of an action, or to dispatch only if a certain condition is met.

redux-logger is incredibly useful because it automatically logs the state tree to the Chrome DevTools Console anytime the state changes.

Usage Example

Let’s check if Redux was properly installed and is working.

1. We will modify our greeter component from part 2, to connect to a Redux store. Notice that since the react-redux library has multiple exports, we need to use the curly brace syntax to import only what we want.

Below we’ve added a mapStateToProps function which is common in React-Redux which allows us to add data to props based off of the state. In this case we add a key defaultMessage whose value comes from message in the state tree.

…/webface/static/webface/js/components/greeter.jsx

import React from 'react';
import { connect } from "react-redux"; 

class Greeter extends React.Component {
render() {
    return <h1>{this.props.defaultMessage}</h1>;
  }
}
 
const mapStateToProps = state => {
 return {
  defaultMessage: state.message
 };
}
export default connect(mapStateToProps)(Greeter);

2. Now we’ll modify the hello.js script to use Redux (reducer, provider, store etc.):

…/webface/static/webface/js/scripts/hello.js

import Greeter from '../components/greeter.jsx';
import { createStore, applyMiddleware } from 'redux';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import thunkMiddleware from 'redux-thunk';
import loggerMiddleware from 'redux-logger';
// ==== reducer ====
const initialState = {
 message: "Hello there Ann"
};
const rootReducer = function(state = initialState, action) {
 switch (action.type) {
  default:
   return state;
 }
};
// ==== main script ====
  
const store = createStore(rootReducer, applyMiddleware(thunkMiddleware, loggerMiddleware));
ReactDOM.render(
  <Provider store={store}>
    <Greeter />,
  </Provider>,
  document.getElementById('root')
);

Notice above when we create our Redux store that we must call:

applyMiddleware(thunkMiddleware, loggerMiddleware)

Note that the loggerMiddleware must be the last middleware in the chain.

Feel free to read more about redux-logger if you wish here.

Now when we go to localhost:8000/es6/ the <h1> greeting we see should read “Hello there Ann”.

We can successfully start using Redux in our web app!