当在企业项目中工作时，中间件中有许多可用的需求，例如（saga）在简单的异步流中不可用，下面是一些：

并行运行请求无需等待，即可采取未来行动无阻塞呼叫比赛效果，示例先拾取响应以启动流程为您的任务排序（首次呼叫）合成任务取消动态分叉任务。支持redux中间件之外的并发运行Saga。使用频道

列表很长，只需查看saga文档中的高级部分

使用Redux saga是React Redux实现中最好的中间件。

前任：商店.js

  import createSagaMiddleware from 'redux-saga';
  import { createStore, applyMiddleware } from 'redux';
  import allReducer from '../reducer/allReducer';
  import rootSaga from '../saga';

  const sagaMiddleware = createSagaMiddleware();
  const store = createStore(
     allReducer,
     applyMiddleware(sagaMiddleware)
   )

   sagaMiddleware.run(rootSaga);

 export default store;

然后saga.js

import {takeLatest,delay} from 'redux-saga';
import {call, put, take, select} from 'redux-saga/effects';
import { push } from 'react-router-redux';
import data from './data.json';

export function* updateLesson(){
   try{
       yield put({type:'INITIAL_DATA',payload:data}) // initial data from json
       yield* takeLatest('UPDATE_DETAIL',updateDetail) // listen to your action.js 
   }
   catch(e){
      console.log("error",e)
     }
  }

export function* updateDetail(action) {
  try{
       //To write store update details
   }  
    catch(e){
       console.log("error",e)
    } 
 }

export default function* rootSaga(){
    yield [
        updateLesson()
       ]
    }

然后是action.js

 export default function updateFruit(props,fruit) {
    return (
       {
         type:"UPDATE_DETAIL",
         payload:fruit,
         props:props
       }
     )
  }

然后reducer.js

import {combineReducers} from 'redux';

const fetchInitialData = (state=[],action) => {
    switch(action.type){
      case "INITIAL_DATA":
          return ({type:action.type, payload:action.payload});
          break;
      }
     return state;
  }
 const updateDetailsData = (state=[],action) => {
    switch(action.type){
      case "INITIAL_DATA":
          return ({type:action.type, payload:action.payload});
          break;
      }
     return state;
  }
const allReducers =combineReducers({
   data:fetchInitialData,
   updateDetailsData
 })
export default allReducers; 

然后是main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app/components/App.jsx';
import {Provider} from 'react-redux';
import store from './app/store';
import createRoutes from './app/routes';

const initialState = {};
const store = configureStore(initialState, browserHistory);

ReactDOM.render(
       <Provider store={store}>
          <App />  /*is your Component*/
       </Provider>, 
document.getElementById('app'));

试试这个。。正在工作

要回答开头提出的问题：

为什么容器组件不能调用异步API，然后分派操作？

请记住，这些文档适用于Redux，而不是Redux+React。连接到React组件的Redux商店可以做到您所说的一切，但没有中间件的Plain Jane Redux商店不接受除普通对象之外的参数来分派。

如果没有中间件，你当然还可以

const store = createStore(reducer);
MyAPI.doThing().then(resp => store.dispatch(...));

但这是一个类似的情况，异步是围绕着Redux而不是由Redux处理的。因此，中间件通过修改可以直接传递给调度的内容来允许异步。

也就是说，我认为你的建议的精神是有效的。在Redux+Rreact应用程序中，当然还有其他方法可以处理异步。

使用中间件的一个好处是，您可以继续正常使用动作创建者，而不必担心它们是如何连接的。例如，使用redux thunk，您编写的代码看起来很像

function updateThing() {
  return dispatch => {
    dispatch({
      type: ActionTypes.STARTED_UPDATING
    });
    AsyncApi.getFieldValue()
      .then(result => dispatch({
        type: ActionTypes.UPDATED,
        payload: result
      }));
  }
}

const ConnectedApp = connect(
  (state) => { ...state },
  { update: updateThing }
)(App);

它看起来与原始版本没有太大区别-只是有点混乱-connect不知道updateThing是（或需要）异步的。

如果您还想支持承诺、可观测性、传奇或疯狂的自定义和高度声明性的动作创建者，那么Redux可以通过更改传递给分派的内容（也就是从动作创建者返回的内容）来实现。无需干扰React组件（或连接调用）。

回答问题：

为什么容器组件不能调用异步API，然后调度行动？

我认为至少有两个原因：

第一个原因是关注点分离，调用api并获取数据不是动作创建者的工作，您必须向动作创建者函数传递两个参数，即动作类型和有效载荷。

第二个原因是因为redux存储正在等待一个具有强制操作类型和可选有效负载的普通对象（但这里也必须传递有效负载）。

动作创建者应该是一个简单的对象，如下所示：

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

Redux Thunk middleware的任务是将api调用的结果显示给适当的操作。

好了，让我们先来看看中间件是如何工作的，这很好地回答了这个问题，这是Redux中的源代码applyMiddleWare函数：

function applyMiddleware() {
  for (var _len = arguments.length, middlewares = Array(_len), _key = 0; _key < _len; _key++) {
    middlewares[_key] = arguments[_key];
  }

  return function (createStore) {
    return function (reducer, preloadedState, enhancer) {
      var store = createStore(reducer, preloadedState, enhancer);
      var _dispatch = store.dispatch;
      var chain = [];

      var middlewareAPI = {
        getState: store.getState,
        dispatch: function dispatch(action) {
          return _dispatch(action);
        }
      };
      chain = middlewares.map(function (middleware) {
        return middleware(middlewareAPI);
      });
      _dispatch = compose.apply(undefined, chain)(store.dispatch);

      return _extends({}, store, {
        dispatch: _dispatch
      });
    };
  };
}

看看这一部分，看看我们的调度是如何成为一个函数的。

  ...
  getState: store.getState,
  dispatch: function dispatch(action) {
  return _dispatch(action);
}

请注意，每个中间件都将作为命名参数提供dispatch和getState函数。

好了，这就是Redux thunk作为Redux最常用的中间件之一介绍自己的方式：

Redux Thunk中间件允许您编写返回函数而不是动作。thunk可用于延迟动作的调度，或仅在某个条件为遇见。内部函数接收存储方法分派和getState作为参数。

正如你所看到的，它将返回一个函数而不是一个操作，这意味着你可以随时等待并调用它，因为它是一个函数。。。

那他妈的是什么？维基百科就是这样介绍的：

在计算机编程中，thunk是一种用于注入将附加计算转换为另一个子例程。雷电主要是用于将计算延迟到需要时，或插入在另一个子例程的开始或结束处的操作。他们有用于编译器代码生成和模块化编程。这个词起源于“思考”的一个滑稽派生词。thunk是一个包装表达式以延迟其评价

//calculation of 1 + 2 is immediate 
//x === 3 
let x = 1 + 2;

//calculation of 1 + 2 is delayed 
//foo can be called later to perform the calculation 
//foo is a thunk! 
let foo = () => 1 + 2;

所以，看看这个概念有多简单，它如何帮助您管理异步操作。。。

这是你可以不用它生活的东西，但请记住，在编程中，总是有更好、更整洁和正确的方式来做事情。。。

有同步动作创建器，然后有异步动作创建器。

同步动作创建器是一个当我们调用它时，它会立即返回一个action对象，其中包含附加到该对象的所有相关数据，并准备好由我们的还原器处理。

异步动作创建器需要一点时间才能最终调度动作。

根据定义，每当您有一个动作创建者发出网络请求时，它总是符合异步动作创建者的资格。

如果您想在Redux应用程序中使用异步动作创建器，则必须安装一种叫做中间件的东西，该中间件将允许您处理这些异步动作创建。

您可以在错误消息中验证这一点，该错误消息告诉我们使用自定义中间件执行异步操作。

那么什么是中间件，为什么我们需要它来实现Redux中的异步流呢？

在redux中间件（如redux thunk）的上下文中，中间件帮助我们处理异步动作创建者，因为这是redux无法开箱即用的。

随着中间件集成到Redux循环中，我们仍在调用动作创建者，这将返回一个将被调度的动作，但现在，当我们调度一个动作时，而不是直接将其发送给所有的reducer，我们将说一个动作将通过应用程序中的所有不同中间件发送。

在一个Redux应用程序中，我们可以拥有任意数量的中间件。在大多数情况下，在我们工作的项目中，我们将有一两个中间件连接到我们的Redux商店。

中间件是一个普通的JavaScript函数，我们分派的每个动作都会调用它。在该功能内部，中间件有机会阻止某个动作被分派到任何一个reducer，它可以修改某个动作或以任何方式处理某个动作，例如，我们可以创建一个中间件，控制台记录您分派的每一个动作，只是为了您的观看乐趣。

有大量的开源中间件可以作为依赖项安装到项目中。

您不限于仅使用开源中间件或将其作为依赖项安装。您可以编写自己的定制中间件，并在Redux商店中使用它。

中间件的一个更流行的用途（并得到您的答案）是处理异步动作创建者，可能最流行的中间件是redux thunk，它是帮助您处理异步动作创作者。

还有许多其他类型的中间件也可以帮助您处理异步动作创建者。