React-Redux middleware decryption

Recently, in the fourth chapter of react + redux implementation, the fog and fog caused by a wonderful middleware have been tossed and broken. Through a series of tests, the fog of the currying function is finally decrypted.

import React from "react";
import { render } from "react-dom";
import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from 'redux-devtools-extension';
import { Provider } from "react-redux";
import { createLogger } from "redux-logger";
import thunk from "redux-thunk";
import reducer from "./reducers";
//import { getAllProducts } from "./actions";
import App from "./containers/App.jsx";
import "./index.css";

const middleware = [thunk];
if (process.env.NODE_ENV !== "production") {
  middleware.push(createLogger());
 * Action creation function
/ **
));
  applyMiddleware (... middleware),
}

const store = createStore(reducer, composeWithDevTools(
 
 * Get products (books) 
 * / 
const getProductsAction = products => ({ 
  type: types.RECEIVE_PRODUCTS, 
  products 
}) 

/ ** 
 * Action creation function 
 * Create a bound action creation function To automatically dispatch 
 * / 
export const getAllProducts = () => dispatch => { 
  shop.getProducts (products => { 
    dispatch (getProductsAction (products)) 
  }) 
} 

// store.dispatch (getAllProducts ()); 
// the above call The method is actually the following form, based on getAllProducts () to construct a dispatch (action) call format 
// Currying function, the dispatch is obtained as sotre.dispatch 
store.dispatch ((dispatch) => { 
  dispatch ({ 
    type: 'RECEIVE_PRODUCTS' , 
    products: [
      {"id": 1, "title": "" The Definitive Guide to JavaScript "", "price": 136.20, "inventory": 3}, 
      {"id": 2, "title": "" Python Core Programming "" , "price": 44.50, "inventory": 8}, 
      {"id": 3, "title": "" C Programming "", "price": 41.00, "inventory": 2} 
    ] 
  }); 
} ) 
// Evolution test 1-1 The test found that this is not possible, only to find later that it is just to define the construction dispatch (action) without executing 
store.dispatch (() => dispatch => { 
  dispatch ({ 
      type: 'RECEIVE_PRODUCTS' , 
      products: [ 
      {"id": 1, "title": "" The Definitive Guide to JavaScript "", "price": 136.20, "inventory": 3}, 
      {"id":2, "title": "《Python核心编程》", "price": 44.50, "inventory": 8 },
      { "id": 3, "title": "《C程序设计》", "price": 42.00, "inventory": 2 }
    ]
    });
});

// Evolution test 1-2 This is possible, use apply () to execute () => function to generate dispatch (action) structure 
store.dispatch ((() => dispatch => { 
  dispatch ({ 
      type: 'RECEIVE_PRODUCTS', 
      products: [ 
      {"id": 1, "title": "" The Authoritative Guide to JavaScript "", "price": 136.20, "inventory": 3}, 
      {"id": 2, "title": "" Python Core Programming "", "price": 44.50, "inventory": 8}, 
      {"id": 3, "title": "" C Programming "", "price": 42.00, "inventory": 2} 
    ] 
    } ); 
}). apply ()); 

// Evolution test 2 
const action1 = () => (dispatch) => { 
  dispatch ( 
    { 
      type: 'RECEIVE_PRODUCTS',RECEIVE_PRODUCTS',
      products: [{ "id": 1, "title": "《JavaScript 权威指南》", "price": 136.20, "inventory": 3 },
      { "id": 2, "title": "《Python核心编程》", "price": 44.50, "inventory": 8 },
      {"id": 3, "title": "" C Programming "", "price": 43.00, "inventory": 2} 
      ] 
    } 
  ); 
} 
store.dispatch (action1); // This is not enough, Because the value is a function signature, you need to execute the dispatch 
store.dispatch (action1 ()); // This is ok, this kind of explanation is very long, but slowly realize it. 
// Evolution test 3 
store.dispatch (() => { 
  let dispatch = store.dispatch; 
  dispatch ( 
    { 
      type: 'RECEIVE_PRODUCTS', 
      products: [{"id": 1, "title": "The Authoritative Guide to JavaScript" "," price ": 136.20," inventory ": 3}, 
      {" id ": 2," title ":" "Python Core Programming" "," price ": 44.50," inventory ": 8},
      ] 
    } 
  ); 
}); 

  let dispatch = store.dispatch; 
  dispatch ( 
    { 
      type: 'RECEIVE_PRODUCTS', 
      products: [{"id": 1, "title": "" The Authoritative Guide to JavaScript "", "price": 136.20 , "inventory": 3}, 
      {"id": 2, "title": "" Python Core Programming "", "price": 44.50, "inventory": 8}, 
      {"id": 3, "title" : "" C Programming "", "price": 45.00, "inventory": 2} 
      ] 
    } 
  ); 
} 
store.dispatch (action2); 

// Through evolution 3 evolution 3-1 should understand the function currying, It is to declare the function in the function and execute the function 
// so back to getAllProducts () and the first evolution function we found out that the store.dispatch (action) 
// This is the dispatch (action) statement, we mainly declare the action function body, as for the source of dispatch is actually
// It is internally assigned and implemented by the currying function. Such as evolution 3 3-1 function let dispatch = store.dispatch; 
// Mainly the following code is equivalent to rewriting the sotre dispatch function, similar to the realization of aop 
// The internal will receive a curry function code segment. As for the function signatures and variables required by the code segment, they are implemented inside aop
// const middleware = [thunk]; 
// if (process.env.NODE_ENV! == "production") { 
// middleware.push (createLogger ()) ; 
//} 
// const store = createStore (reducer, composeWithDevTools ( 
// applyMiddleware (... middleware), 
//)); 
// 


render ( 
  <Provider store = {store}> 
    <App /> 
  </ Provider> , 
  document.getElementById ("root") 
);