React-redux-universal-hot-example: Need some comments to important modules

[dac2205]

I am unable to understand the purposes of some code blocks in some files. I really love this starter-kit and hope you can help:

• redux/middleware/clientMiddleware.js
• redux/create
• containers/widgets/asyncConnect

[tearsofphoenix]

@dac2205

1. First understand redux middleware

export default function clientMiddleware(client) {
  return ({dispatch, getState}) => {
    return next => action => {
      //if action is `function` type, it means user return a custom action, so just call it and pass 
     //`dispatch` & `getState` as the arguments.
      if (typeof action === 'function') {
        return action(dispatch, getState);
      }

      //load arguments from action
      const { promise, types, ...rest } = action; // eslint-disable-line no-redeclare
      //if no promise, it means it's a just `deterministic` action which has only one `type`
      //e.g. action to popup a notification or change global UI state. 
      if (!promise) {
        return next(action);
      }

      //gather result types, notice the order of types
      const [REQUEST, SUCCESS, FAILURE] = types;
      //prepare to call the action
      next({...rest, type: REQUEST});

      //create a promise, pass api client as argument, here start ajax requests
      const actionPromise = promise(client);
      actionPromise.then(
        //handle success response
        (result) => next({...rest, result, type: SUCCESS}),
       //handle error response 
        (error) => next({...rest, error, type: FAILURE})
      ).catch((error)=> {
        //catch middleware  error, e.g. parse error, type mismatch
        console.error('MIDDLEWARE ERROR:', error); 
        next({...rest, error, type: FAILURE});
      });

      return actionPromise;
    };
  };
}

2.

import { createStore as _createStore, applyMiddleware, compose } from 'redux';
import createMiddleware from './middleware/clientMiddleware';
import { syncHistory } from 'react-router-redux';

//wrapper to create the only store of the webapp
export default function createStore(history, client, data) {
  // Sync dispatched route actions to the history
  const reduxRouterMiddleware = syncHistory(history);

  //create redux middlewares
  const middleware = [createMiddleware(client), reduxRouterMiddleware];

  let finalCreateStore;
  //in development mode, add devtools if enabled
  if (__DEVELOPMENT__ && __CLIENT__ && __DEVTOOLS__) {
    const { persistState } = require('redux-devtools');
    const DevTools = require('../containers/DevTools/DevTools');
    finalCreateStore = compose(
      applyMiddleware(...middleware),
      window.devToolsExtension ? window.devToolsExtension() : DevTools.instrument(),
      persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
    )(_createStore);
  } else {
    //just apply middlewares on original `createStore` of redux
    finalCreateStore = applyMiddleware(...middleware)(_createStore);
  }

  //create the store
  const reducer = require('./modules/reducer');
  const store = finalCreateStore(reducer, data);

  reduxRouterMiddleware.listenForReplays(store);

  //if in `hot module reload` mode ?
  if (__DEVELOPMENT__ && module.hot) {
    module.hot.accept('./modules/reducer', () => {
      store.replaceReducer(require('./modules/reducer'));
    });
  }

  return store;
}

3.redux-async-connect
fetch data before component mount, see document of the package

[dac2205]

Thank you @tearsofphoenix

Why don't we put those comments into source code?