REDUX-REACT - 调度未定义答案

【问题标题】：REDUX-REACT - dispatch undefinedREDUX-REACT - 调度未定义
【发布时间】：2019-10-11 23:40:27
【问题描述】：

组件中的调度未定义，mapDispatchToProps 中的调度正常

Action 和 reducer 没问题 - 100%；我想在行动中转移以创建请求并从行动中运行行动

我的组件：

import React, { Component, Fragment } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import styled from 'styled-components';
import  { carAction, fetchDogAction } from '../../../actions/CarAction';

class CarListContainer extends Component {
    render () {

        const { cars, carAction, dispatch, dog } = this.props;

        console.log(dispatch) // THIS UNDEFINED!!!!

        return(
            <Fragment>
                <Title onClick={() => {
                    fetchDogAction(dispatch)
                }}>HEllo</Title>

                {cars.map((elem) => 
                    <Title onClick={() => {carAction (elem)}} key={elem.id}>{elem.mark}</Title>
                )}

                {dog ? <img src={dog.message} /> : null }
            </Fragment>
        )
    }
}

const Title = styled('h2')`
    color: red;
    font-size: 30px;
`;

function mapStateToProps (state) {
    return {
        cars: state.cars,
        dog: state.dog
    }
}

function mapDispatchToProps(dispatch) {
    console.log(dispatch) //THIS DISPATCH IS OK
    return bindActionCreators ({
        carAction: carAction,
        fetchDogAction: fetchDogAction
    }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(CarListContainer);

【问题讨论】：

标签： reactjs redux jsx

【解决方案1】：

您的错误来自于在 mapDispatchToProps() 中包含 bindActionCreators()，这是不推荐的做法，因为 mapDispatchToProps 在内部使用了 bindActionCreators。

bindActionCreators and mapDispatchToProps - Do I need them?

您可以尝试直接在 mapDispatchToProps 方法中使用箭头函数和调度动作。

import * ACTIONS from './actions'

function mapDispatchToProps(dispatch) {
    return {
        carAction: (elem) => dispatch(ACTIONS.fetchCarAction(elem)) ,
        dogAction: () => dispatch(ACTIONS.fetchDogAction()) 
    }
}

//action creators import them into your component
export const fetchCarAction = (elem) => {
  return {
    type: ACTION_TYPES.CARACTION,
    payload: elem
  }
}

export const fetchDogAction = () => {
  return {
    type: ACTION_TYPES.DOGACTION,
  }
}

//render method

<Title onClick={() => this.props.dogAction() }>HEllo</Title>


{cars.map((elem) => 
  <Title onClick={() => this.props.carAction(elem) } key={elem.id}>{elem.mark} 
  </Title>
  )}

因此，在您的渲染中，您将调用 mapDispatchToProps 中的属性名称，而不是动作创建者的名称，我保持动作创建者的名称和属性名称不同，这样您就可以看到这一点。

如果你想要一个功能齐全的 react-redux 应用程序，你可以查看我构建的这个入门项目，我得到了很好的反馈。

https://github.com/iqbal125/modern-react-app-sample

【讨论】：