根据文档，“没有中间件，Redux存储仅支持同步数据流”。我不明白为什么会这样。为什么容器组件不能调用异步API，然后再调用dispatch操作？
例如，想象一个简单的UI：一个字段和一个按钮。当用户按下按钮时，该字段将填充来自远程服务器的数据。
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仓库中搜索了线索，发现过去需要Action Creators是纯函数。例如，以下用户试图为异步数据流提供更好的解释：
动作创建者本身仍然是一个纯函数，但它返回的thunk函数不必是纯函数，它可以执行我们的异步调用
动作创建者不再需要是纯粹的。因此，过去肯定需要使用thunk / promise中间件，但是似乎不再是这种情况了？
52
从未要求动作创建者是纯粹的功能。这是文档中的错误，而不是更改后的决定。
—
Dan Abramov'1
@DanAbramov出于可测试性，可能是一个很好的实践。Redux-saga允许这样做：stackoverflow.com/a/34623840/82609
—
Sebastien Lorber
