Tech-Today

React Todo with 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 :-)

- Do Some Initialization Work After The Web Application Initialization Process
We can achieve this by using a webListener. See code below: package com.czetsuya; import java.text.MessageFormat; import java.util.ResourceBundle; import javax.inject.Inject; import javax.servlet.ServletContextEvent; import javax.servlet.ServletContextListener;...

- How To Call A Javaee Rest Web Service With Basic Authentication Using Jquery Ajax
I don't really remember when I coded it, nor where I got it but I'm writing it here for future use :-) Below is the code I use to test CORS, http://en.wikipedia.org/wiki/Cross-origin_resource_sharing. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>...

- How To Send An Email In Glassfish Using Javamail Session Injection
This tutorial will teach us how to send an email in Glassfish using JavaMail session injection. It use gmail for sending the email. Steps: 1.) First we need to create a JavaMail session by, opening Glassfish admin: http://localhost:4848, and navigating...

- Magento Export And Import Products With Images
How to Export Magento Products 1.) login to the magento admin 2.) go to System->Import/Export->Profiles 3.) select Export All Products 4.) select Run Profile and on the middle-right click the "Run Profile in Popup", this will open a new tab...

- Create A New Eclipse-rcp Preference Page By Code When A Listener Is Invoked
Objective: -To create an eclipse-rcp preference page without using the preference extension, all is done in code. This is done by creating a customized button with a SelectionListener, and eventually that action will call a customized preference page....

Tech-Today