Question

//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”函数调用的调度来使其工作。但是我不明白为什么当动作生成器已经调用了组件时，为什么我们需要再次在组件中调用dispatch。

Answer 1

您的动作创建者实际上是thunk。
当您dispatch redux-thunk middleware捕获并调用它时。
正常动作应该是对象而不是函数，而是redux-thunk allows 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（或链下的其他中间件）处理此操作。

Answer 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);
};

调用多个分派以生成异步操作生成器

2 个答案: