REDUX-REACT - отправка не определена

Question

Отправка в компоненте НЕ УКАЗАНА, и отправка в mapDispatchToProps в порядке

Действие и редукторы в порядке - 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);

Answer 1

Ваша ошибка возникает из-за наличия bindActionCreators () внутри mapDispatchToProps (), что не является рекомендуемой практикой, поскольку mapDispatchToProps внутренне использует bindActionCreators.

bindActionCreators и mapDispatchToProps - они мне нужны?

Вы можете попробовать использовать функцию стрелки и диспетчеризировать действия непосредственно в методе 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, а не имя создателя действия. Я оставил имя создателей действия и имя свойств различными, чтобы вы могли видетьэтот.

Если вы хотите полностью работающее приложение «Реакция-редукция», вы можете проверить этот начальный проект, который я создал, и я получил хорошие отзывы об этом.

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