Introduction to React Middleware

This blog post explains the updates done to React Todo app such as adding Middlewares, Enhancers, API calls, etc.

Things to notice:

• Naming convention, inspired from angular I suffixed the files with .x.js depending on the type. For example .container.js.
• I added action codes in the .container.js file.
• I use class for components that extend React.Component.

The most important change done is in the configuration of the store. We introduced two new files for development and production store configuration. Each configuration has its own set of middlewares and enhancers. 

Let's see the code:

index.js file

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { Provider } from 'react-redux'
import configureStore from './core/store/configureStore';

const store = configureStore()

ReactDOM.render(
    
       
    
    , document.getElementById('root')
);
registerServiceWorker();

configureStore.js - determines the environment of our running server

if (process.env.NODE_ENV && process.env.NODE_ENV.trim() === 'production') {
  module.exports = require('./configureStore.prod');
} else {
  module.exports = require('./configureStore.dev');
}

Development configuration

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { createLogger } from 'redux-logger';
//import api from '../middleware/api'
import rootReducer from '../../reducers';
import promise from 'redux-promise-middleware';
import { composeWithDevTools } from 'redux-devtools-extension';
import { crashReporter } from '../Middlewares';
import { monitorReducerEnhancer } from '../Enhancers';
import { apiMiddleware } from 'redux-api-middleware';

const promiseMiddleware = promise();

const configureStore = preloadedState => {
  const store = createStore(
    rootReducer,
    preloadedState,
    composeWithDevTools(
      applyMiddleware(
        thunk,
        apiMiddleware,
        promiseMiddleware,
        createLogger(),
        crashReporter
      ),
      monitorReducerEnhancer
    )
  );

  if (process.env.NODE_ENV !== 'production' && module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../../reducers', () => {
      store.replaceReducer(rootReducer);
    });
  }

  return store;
};

export default configureStore;

Production configuration

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
//import api from '../middleware/api'
import rootReducer from '../../reducers';
import promise from 'redux-promise-middleware';
import { crashReporter } from '../Middlewares';
import { apiMiddleware } from 'redux-api-middleware';

const promiseMiddleware = promise();

const configureStore = preloadedState =>
  createStore(
    rootReducer,
    preloadedState,
    applyMiddleware(thunk, apiMiddleware, promiseMiddleware, crashReporter)
  );

export default configureStore;

The complete source code is available at https://github.com/czetsuya/React-MyTodo/releases/tag/1.0.1

Note: I've added implementation code for using a router and API middleware in the master branch.

References

• https://redux.js.org/basics/exampletodolist
• https://github.com/reduxjs/redux/tree/master/examples/todos

If you're looking for customization, I'm always available for consultation :-)