React-Redux 中间件解密

最近在看react+redux实现的第四章，被一个奇葩的中间件搞的云里雾里，都被折腾坏了，通过一些列的测试最终解密柯里化函数的迷雾。

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());
}

const store = createStore(reducer, composeWithDevTools(
  applyMiddleware(...middleware),
));

/**
 * Action 创建函数
 * 获取商品（书籍）
 */
const getProductsAction = products => ({
  type: types.RECEIVE_PRODUCTS,
  products
})

/**
 * Action 创建函数
 * 创建一个被绑定的 action 创建函数来自动 dispatch
 */
export const getAllProducts = () => dispatch => {
  shop.getProducts(products => {
    dispatch(getProductsAction(products))
  })
}

// store.dispatch(getAllProducts());
// 上述调用方式实际为下述形式,基于getAllProducts() 构造一个dispatch(action)调用格式
// 柯里化函数，dispatch获取为sotre.dispatch
store.dispatch((dispatch) => {
  dispatch({
    type: '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程序设计》", "price": 41.00, "inventory": 2 }
    ]
  });
})
//演变测试1-1 测试发现这样是不行的，后来才发现这里仅仅是定义了构造 dispatch(action)没有执行
store.dispatch(()=>dispatch =>{
  dispatch({
      type: '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程序设计》", "price": 42.00, "inventory": 2 }
    ]
    });
});

//演变测试1-2 这样是可以的，利用apply()执行 ()=>函数生成 dispatch(action)结构
store.dispatch((()=>dispatch =>{
  dispatch({
      type: '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程序设计》", "price": 42.00, "inventory": 2 }
    ]
    });
}).apply());

//演变测试2
const action1 = ()=> (dispatch) => {
  dispatch(
    {
      type: '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程序设计》", "price": 43.00, "inventory": 2 }
      ]
    }
  );
}
store.dispatch(action1); //这样是不行的，因为值是一个函数签名需要执行生成需要的dispatch
store.dispatch(action1()); //这样是行的，这个种要解释很长，但慢慢体会吧。
//演变测试3
store.dispatch(() => {
  let dispatch = store.dispatch;
  dispatch(
    {
      type: '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程序设计》", "price": 44.00, "inventory": 2 }
      ]
    }
  );
});

//演变测试3-1
const action2 = () => {
  let dispatch = store.dispatch;
  dispatch(
    {
      type: '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程序设计》", "price": 45.00, "inventory": 2 }
      ]
    }
  );
}
store.dispatch(action2);

//通过演变3 演变3-1 应该明白了函数柯里化，就是在函数中声明函数并且执行函数
//所以回到 getAllProducts() 以及 第一个演变函数 我们发现其实store.dispatch(action)
//这个是dispatch(action)声明，我们主要声明action函数体，至于dispatch的来源实际上
//是柯里化函数内部赋值和实现的。如演变3 3-1 函数   let dispatch = store.dispatch;
//主要是下述这段代码相当于重写了sotre dispatch函数，类似实现了aop
//内部会接收一个柯里化函数代码段。至于代码段需要的函数签名与变量在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")
);