Descriptografia de middleware React-Redux

Recentemente, no quarto capítulo da implementação do react + redux, o nevoeiro e o nevoeiro causados ​​por um maravilhoso middleware foram lançados e quebrados.Por meio de uma série de testes, o nevoeiro da função de curry foi finalmente descriptografado.

importar Reagir de "reagir"; 
import {renderizar} de "react-dom"; 
import {createStore, applyMiddleware} de "redux"; 
import {composeWithDevTools} de 'redux-devtools-extension'; 
import {Provider} de "react-redux"; 
import {createLogger} do "redux-logger"; 
importar thunk de "redux-thunk"; 
redutor de importação de "./reducers"; 
// import {getAllProducts} de "./actions"; 
importar App de "./containers/App.jsx"; 
import "./index.css"; 

const middleware = [thunk]; 
if (process.env.NODE_ENV! == "produção") { 
  middleware.push (createLogger ());


 * Obter produtos (livros) 
 * / 
const getProductsAction = products => ({ 
  type: types.RECEIVE_PRODUCTS, 
  products 
}) 

/ ** 
 * Função de criação de ação 
 * Crie uma função de criação de ação vinculada para despachar automaticamente 
 * / 
exportar const getAllProducts = () => expedição => { 
  shop.getProducts (produtos => { 
    expedição (getProductsAction (produtos)) 
  }) 
} 

// store.dispatch (getAllProducts ()); 
// O método de chamada acima é realmente o seguinte formulário, com base em getAllProducts () constrói um formato de chamada de despacho (ação) 
// Função Currying, o despacho fica como sotre.dispatch store.dispatch 
((despacho) => { 
  dispatch ({ 
    type: 'RECEIVE_PRODUCTS', 
    produtos: [
      {"id": 1, "title": "" O Guia Definitivo para JavaScript "", "price": 136,20, "inventário": 3}, 
      {"id": 2, "title": "" Python Core Programming "" , "preço": 44,50, "estoque": 8}, 
      {"id": 3, "título": "" Programação C "", "preço": 41,00, "estoque": 2} 
    ] 
  }); 
} ) 
// Teste de evolução 1-1 O teste concluiu que isso não é possível, apenas para descobrir posteriormente que é apenas para definir o despacho de construção (ação) sem executar 
store.dispatch (() => dispatch => { 
  dispatch ({ 
      type: 'RECEIVE_PRODUCTS' , 
      produtos: [ 
      {"id": 1, "title": "" O guia definitivo para JavaScript "", "preço": 136,20, "inventário": 3}, 
      {"id":2, "title": "《Python》 编程》", "preço": 44,50, "inventário": 8}, 
      {"id": 3, "title": "《C 程序 设计》", "preço": 42,00, "inventário": 2} 
    ] 
    });
});RECEIVE_PRODUCTS ', 
      produtos: [{"id": 1, "title": "《JavaScript 权威 指南》", "preço": 136,20, "inventário": 3},

// Teste de evolução 1-2 É possível, use apply () para executar () => função para gerar estrutura de expedição (ação) 
store.dispatch ((() => dispatch => { 
  dispatch ({ 
      type: 'RECEIVE_PRODUCTS', 
      produtos: [ 
      {"id": 1, "title": "" O Guia Autoritário para JavaScript "", "price": 136,20, "inventário": 3}, 
      {"id": 2, "title": "" Python Core Programação "", "preço": 44,50, "estoque": 8}, 
      {"id": 3, "title": "" Programação C "", "preço": 42,00, "estoque": 2} 
    ] 
    } ); 
}). apply ()); 

// Teste de evolução 2 
const action1 = () => (expedição) => { 
  expedição ( 
    { 
      tipo: '
      {"id": 2, "title": "" Python Core Programming "", "price": 44,50, "inventário": 8}, 
      {"id": 3, "title": "" C Programming "" , "price": 43.00, "inventário": 2} 
      ] 
    } 
  ); 
} 
store.dispatch (action1); // Isso não funcionará, porque o valor é uma assinatura de função que precisa ser executada para gerar a expedição necessária 
store.dispatch (action1 ( )); // Tudo bem, esse tipo de explicação é muito longo, mas lentamente perceba. 
// Teste de evolução 3 
store.dispatch (() => { 
  let dispatch = store.dispatch; 
  dispatch ( 
    { 
      type: 'RECEIVE_PRODUCTS', 
      produtos: [{"id": 1, "title": "O Guia Autoritário para JavaScript") "," preço ": 136,20," inventário ": 3}, 
      {" id ": 2,
 
  let dispatch = store.dispatch; 
  dispatch ( 
    { 
      type: 'RECEIVE_PRODUCTS', 
      produtos: [{"id": 1, "title": "" O Guia Autoritário para JavaScript "", "price": 136,20 , "inventário": 3}, 
      {"id": 2, "title": "" Python Core Programming "", "price": 44,50, "inventário": 8}, 
      {"id": 3, "title" : "" Programação C "", "preço": 45,00, "estoque": 2} 
      ] 
    } 
  ); 
} 
store.dispatch (action2); 

// Através da evolução 3, a evolução 3-1 deve entender a função currying, É declarar a função na função e executar a função 
// então voltar para getAllProducts () e a primeira função de evolução que descobrimos que a loja.expedição (ação) 
// Esta é a declaração de expedição (ação), declaramos principalmente o corpo da função de ação, pois a origem da expedição é realmente
// É internamente atribuído e implementado pela função de curry. Como a função evolution 3 3-1, deixe dispatch = store.dispatch;
// Principalmente o código a seguir é equivalente a reescrever a função de despacho sotre, semelhante à realização de aop 
// O interno receberá um segmento de código de função curry . Quanto às assinaturas de funções e variáveis ​​requeridas pelo segmento de código, elas são implementadas dentro do aop
// const middleware = [thunk]; 
// if (process.env.NODE_ENV! == "produção") { 
// middleware.push (createLogger ()); 
//} 
// const store = createStore (redutor, composeWithDevTools ( 
// applyMiddleware (... middleware), 
//)); 
// 


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