根据文档,“没有中间件,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中间件,但是似乎不再是这种情况了?