为了账号安全,请及时绑定邮箱和手机立即绑定

为什么我们需要中间件来支持Redux中的异步流?

为什么我们需要中间件来支持Redux中的异步流?

largeQ 2019-07-03 18:44:17
为什么我们需要中间件来支持Redux中的异步流?根据医生的说法,没有中间件,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({               };     }当呈现导出组件时,我可以单击按钮并正确更新输入。注意update函数中的connect打电话。它分发一个动作,告诉App它正在更新,然后执行异步调用。调用完成后,提供的值作为另一个操作的有效负载分派。这种方法有什么问题?如文档所示,我为什么要使用ReduxThunk或Redux承诺呢?编辑:我搜索了Redux回购的线索,发现在过去,ActionCreator必须是纯功能。例如,下面是一个试图为异步数据流提供更好解释的用户:动作创建者本身仍然是一个纯函数,但是它返回的thunk函数不需要是,它可以执行我们的异步调用。行为创造者不再被要求是纯粹的。因此,Thunk/Probure中间件在过去是绝对需要的,但现在似乎不再是这种情况了?
查看完整描述

3 回答

  • 3 回答
  • 0 关注
  • 1118 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信