React Todo Amongst Middleware

This weblog postal service explains the updates done to React Todo app such every bit adding Middlewares, Enhancers, API calls, etc.

Things to notice:

Naming convention, inspired from angular I suffixed the files alongside .x.js depending on the type. For instance .container.js.
I added activity codes inwards the .container.js file.
I operate degree for components that extend React.Component.

The close of import alter done is inwards the configuration of the store. We introduced ii novel files for evolution as well as production shop configuration. Each configuration has its ain laid of middlewares as well as enhancers.

Let's encounter 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 shop = configureStore()  ReactDOM.render(                       , document.getElementById('root') ); registerServiceWorker();

configureStore.js - determines the surroundings 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 hope 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 shop = 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);     });   }    homecoming 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 hope 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 consummate 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 as well as API middleware inwards the top dog branch.

References

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