调用异步操作生成器的多个调度答案

【问题标题】：Call to multiple dispatch for async action generators调用异步操作生成器的多个调度
【发布时间】：2018-12-16 08:31:01
【问题描述】：

//Action Generator
   export const userActionGenerator = () => {
        return function (dispatch) {
             axios.get(`https://jsonplaceholder.typicode.com/users`)
             .then((resp)=> {
                  //First Call to Dispatch 
                  dispatch({ type: 'GETUSER', payload: resp.data});
             })

        }       
            
   }


//Component
  import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { userActionGenerator} from '../store/appStore'

  class Users extends Component {
      render() {
           console.log(this.props)
           return (
              <div>
                Users Component
                <button onClick={this.props.getAllUsers}>
                Load Users</button>
                {this.props.data.map(item => {
                    return (
                        <div key={item.id}>
                            <h1>{item.name}</h1>
                        </div>
                    )
                })}
              </div>
           )
       }
   }
   const mapStateToProps = (state, props) => ({data: state.users})
   const mapDispatchToProps = dispatch => (
            {
                getAllUsers: () => {
                    //Second Call to Dispatch
                    dispatch(userActionGenerator());
                }
            }
        )
   export default connect(mapStateToProps,mapDispatchToProps)(Users);

在没有“dispatch”的情况下直接调用“userActionGenerator”不会给出任何响应，我可以通过调用“userActionGenerator”函数调用的调度来使其工作。但是我不明白为什么我们需要在动作生成器已经调用它时再次调用组件中的调度。

【问题讨论】：

您如何将 ActionCreator 即 userActionGenerator 传递给您的组件？
是的，我正在从另一个模块导入。我更新了代码以显示导入。
我没有从你的问题中得到一件事。在您的代码中，只有一次调用调度。你为什么说你要调用它两次？
@kumarmo2 如果您看到代码，我再次将“userActionGenerator”传递给“mapDispatchToProps”内代码底部的调度函数。
你必须通过 dispatch 把它发送到 redux，否则，redux 是怎么知道它的呢？当使用 redux-thunk 中间件并分派一个函数时，分派然后被传递到 curried 函数中，以便在执行异步操作后调用。不过，您必须首先将该函数分派给 redux。

标签： reactjs redux redux-thunk

【解决方案1】：

您的动作创建者实际上是 thunk。
当您 dispatch 它时，redux-thunk middleware 将捕获它并调用它。
正常动作应该是对象而不是函数，而是redux-thunkallows you to dispatch functions：

if (typeof action === 'function') {
  return action(dispatch, getState, extraArgument);
}

当redux-thunk 调用该函数时，它必须调度一个真实的动作（一个对象），这是你的第二个dispatch。

所以这是流程：

dispatch(userActionGenerator());

redux-thunk 会捕捉到这个，因为userActionGenerator 返回的是一个函数而不是一个对象，它将调用返回的函数，在传递它时(dispatch, getState, extraArgument)：

return function (dispatch) {
   axios.get(`https://jsonplaceholder.typicode.com/users`)
   .then((resp)=> {
       //First Call to Dispatch 
       dispatch({ type: 'GETUSER', payload: resp.data});
     })
}

这个返回的函数正在调度一个对象，这意味着redux-thunk 将忽略它并让reducer（或链下的其他中间件）处理这个动作。

【讨论】：

【解决方案2】：

使用 bindActionCreators 是您可能需要的。 Here 是官方文档。请通过它。

import { bindActionCreators } from 'redux';

// Using bindActionCreators you don't need to use dispatch
const mapDispatchToProps = dispatch => bindActionCreators({
  // actions
  userActionGenerator,
  // action1,
  // action2,
  // ...
}, dispatch);

在你的动作文件中你必须写的是这样的。

const userActionGenerator = (...args) => dispatch => {
  dispatch(object1);
  dispatch(object2);
};

【讨论】：