javascript - 为什么我们需要Redux中的异步流中间件?

根据文件,"Without middleware, Redux store only supports synchronous data flow"。我不明白为什么会这样。为什么容器组件不能调用异步API,然后dispatch这些操作?
例如,想象一个简单的用户界面:一个字段和一个按钮。当用户按下按钮时,该字段将填充来自远程服务器的数据。
A field and a button

import * as React from 'react';
import * as Redux from 'redux';
import { Provider, connect } from 'react-redux';

const ActionTypes = {
    STARTED_UPDATING: 'STARTED_UPDATING',
    UPDATED: 'UPDATED'
};

class AsyncApi {
    static getFieldValue() {
        const promise = new Promise((resolve) => {
            setTimeout(() => {
                resolve(Math.floor(Math.random() * 100));
            }, 1000);
        });
        return promise;
    }
}

class App extends React.Component {
    render() {
        return (
            <div>
                <input value={this.props.field}/>
                <button disabled={this.props.isWaiting} onClick={this.props.update}>Fetch</button>
                {this.props.isWaiting && <div>Waiting...</div>}
            </div>
        );
    }
}
App.propTypes = {
    dispatch: React.PropTypes.func,
    field: React.PropTypes.any,
    isWaiting: React.PropTypes.bool
};

const reducer = (state = { field: 'No data', isWaiting: false }, action) => {
    switch (action.type) {
        case ActionTypes.STARTED_UPDATING:
            return { ...state, isWaiting: true };
        case ActionTypes.UPDATED:
            return { ...state, isWaiting: false, field: action.payload };
        default:
            return state;
    }
};
const store = Redux.createStore(reducer);
const ConnectedApp = connect(
    (state) => {
        return { ...state };
    },
    (dispatch) => {
        return {
            update: () => {
                dispatch({
                    type: ActionTypes.STARTED_UPDATING
                });
                AsyncApi.getFieldValue()
                    .then(result => dispatch({
                        type: ActionTypes.UPDATED,
                        payload: result
                    }));
            }
        };
    })(App);
export default class extends React.Component {
    render() {
        return <Provider store={store}><ConnectedApp/></Provider>;
    }
}

渲染导出的组件时,我可以单击按钮并正确更新输入。
注意update调用中的connect函数。它发送一个操作,告诉应用程序它正在更新,然后执行异步调用。调用完成后,所提供的值作为另一个操作的有效负载进行调度。
这种方法有什么问题?为什么我要使用redux thunk或redux promise,如文档所示?
编辑:我在redux repo中搜索了线索,发现动作创建者过去被要求是纯粹的函数。例如,here's a user trying to provide a better explanation for async data flow:
动作创建者本身仍然是一个纯函数,但是它返回的thunk函数不需要是,它可以执行我们的异步调用。
Action creators are no longer required to be pure.那么,thunk/promise中间件在过去肯定是必需的,但现在似乎不再是这样了?


最佳答案:

这种方法有什么问题?为什么我要使用redux thunk或redux promise,如文档所示?
这种方法没有错。在一个大的应用程序中,这是不方便的,因为您将有不同的组件执行相同的操作,您可能希望消除某些操作,或保持一些本地状态,如自动递增的ID靠近操作创建者等,因此从维护的角度来看,这很容易将动作创建者提取到单独的函数中。
您可以阅读my answer to “How to dispatch a Redux action with a timeout”了解更详细的演练。
像redux-thunk或redux-promise这样的中间件只为发送thunk或promise提供了“语法糖”,但您不必使用它。
因此,如果没有任何中间件,您的操作创建者可能看起来像

// action creator
function loadData(dispatch, userId) { // needs to dispatch, so it is first argument
  return fetch(`http://data.com/${userId}`)
    .then(res => res.json())
    .then(
      data => dispatch({ type: 'LOAD_DATA_SUCCESS', data }),
      err => dispatch({ type: 'LOAD_DATA_FAILURE', err })
    );
}

// component
componentWillMount() {
  loadData(this.props.dispatch, this.props.userId); // don't forget to pass dispatch
}

但是使用thunk中间件,您可以这样编写它:
// action creator
function loadData(userId) {
  return dispatch => fetch(`http://data.com/${userId}`) // Redux Thunk handles these
    .then(res => res.json())
    .then(
      data => dispatch({ type: 'LOAD_DATA_SUCCESS', data }),
      err => dispatch({ type: 'LOAD_DATA_FAILURE', err })
    );
}

// component
componentWillMount() {
  this.props.dispatch(loadData(this.props.userId)); // dispatch like you usually do
}

所以没有很大的区别。我喜欢后一种方法的一点是,组件不关心动作创建者是异步的。它通常只调用dispatch,还可以使用mapDispatchToProps将此类动作创建者绑定为短语法等。组件不知道如何实现动作创建者,您可以在不同的异步方法(redux thunk、redux promise、redux saga)之间切换,而无需更改组件。另一方面,使用前一种显式方法,您的组件确切地知道特定的调用是异步的,并且需要通过某种约定来传递dispatch(例如,作为一个同步参数)。
还要考虑这个代码将如何更改。假设我们想要第二个数据加载函数,并将它们组合到一个动作创建者中。
通过第一种方法,我们需要注意我们称之为什么样的行动创造者:
// action creators
function loadSomeData(dispatch, userId) {
  return fetch(`http://data.com/${userId}`)
    .then(res => res.json())
    .then(
      data => dispatch({ type: 'LOAD_SOME_DATA_SUCCESS', data }),
      err => dispatch({ type: 'LOAD_SOME_DATA_FAILURE', err })
    );
}
function loadOtherData(dispatch, userId) {
  return fetch(`http://data.com/${userId}`)
    .then(res => res.json())
    .then(
      data => dispatch({ type: 'LOAD_OTHER_DATA_SUCCESS', data }),
      err => dispatch({ type: 'LOAD_OTHER_DATA_FAILURE', err })
    );
}
function loadAllData(dispatch, userId) {
  return Promise.all(
    loadSomeData(dispatch, userId), // pass dispatch first: it's async
    loadOtherData(dispatch, userId) // pass dispatch first: it's async
  );
}


// component
componentWillMount() {
  loadAllData(this.props.dispatch, this.props.userId); // pass dispatch first
}

使用redux thunk action creators可以dispatch其他action creators的结果,甚至不考虑它们是同步的还是异步的:
// action creators
function loadSomeData(userId) {
  return dispatch => fetch(`http://data.com/${userId}`)
    .then(res => res.json())
    .then(
      data => dispatch({ type: 'LOAD_SOME_DATA_SUCCESS', data }),
      err => dispatch({ type: 'LOAD_SOME_DATA_FAILURE', err })
    );
}
function loadOtherData(userId) {
  return dispatch => fetch(`http://data.com/${userId}`)
    .then(res => res.json())
    .then(
      data => dispatch({ type: 'LOAD_OTHER_DATA_SUCCESS', data }),
      err => dispatch({ type: 'LOAD_OTHER_DATA_FAILURE', err })
    );
}
function loadAllData(userId) {
  return dispatch => Promise.all(
    dispatch(loadSomeData(userId)), // just dispatch normally!
    dispatch(loadOtherData(userId)) // just dispatch normally!
  );
}


// component
componentWillMount() {
  this.props.dispatch(loadAllData(this.props.userId)); // just dispatch normally!
}

使用这种方法,如果以后希望动作创建者查看当前的redux状态,则可以使用传递给thunks的第二个getState参数,而不必修改调用代码:
function loadSomeData(userId) {
  // Thanks to Redux Thunk I can use getState() here without changing callers
  return (dispatch, getState) => {
    if (getState().data[userId].isLoaded) {
      return Promise.resolve();
    }

    fetch(`http://data.com/${userId}`)
      .then(res => res.json())
      .then(
        data => dispatch({ type: 'LOAD_SOME_DATA_SUCCESS', data }),
        err => dispatch({ type: 'LOAD_SOME_DATA_FAILURE', err })
      );
  }
}

如果需要将其更改为同步,也可以在不更改任何调用代码的情况下执行此操作:
// I can change it to be a regular action creator without touching callers
function loadSomeData(userId) {
  return {
    type: 'LOAD_SOME_DATA_SUCCESS',
    data: localStorage.getItem('my-data')
  }
}

因此,使用诸如redux thunk或redux promise之类的中间件的好处在于,组件不知道动作创建者是如何实现的,也不知道它们是否关心redux状态,它们是同步的还是异步的,以及它们是否调用其他动作创建者。缺点是有点间接性,但我们相信它在实际应用中是值得的。
最后,redux thunk和friends只是redux应用程序中异步请求的一种可能方法。另一个有趣的方法是Redux Saga,它允许您定义长时间运行的守护进程(“sagas”),这些守护进程在执行操作时执行操作,并在输出操作之前转换或执行请求。这将逻辑从动作创建者转移到传奇中。你可能想看看,然后选择最适合你的。
我搜索redux repo寻找线索,发现动作创建者在过去被要求是纯粹的功能。
这是不正确的。医生说了这个,但医生错了。
动作创建者从未被要求是纯粹的函数。
我们修正了文件以反映这一点。