Redux Action Return функция не работает

Question

Создано действие для обработки моих данных с помощью Axios.Функция действия вызывается с помощью кнопки и вызывает действие нормально.Первая консольная строка будет экспортировать P_Key моего массива, однако консоль в return не работает, и я понятия не имею, почему.Я использую выходные данные консоли, чтобы проверить, где и что находятся мои данные в приложении.Я делал это раньше с другими действиями, поэтому я знаю, что могу это сделать.

Сломанное действие

import { RIDER_VAN } from './types';
import axios from 'axios';

export default function riderVan(vanArray, riderInfo, availSeats) {
    const P_Key = vanArray.P_Key;
    //This console.log works
    console.log(P_Key);
    return (dispatch) => {
        //This console.log DOES not work
        console.log(riderInfo);
    }
}

function updateVanAsync(vans) {
    return {
        type: RIDER_VAN,
        payload: vans
    }
}

Рабочее действие

import { ADD_VANS } from './types';
import axios from 'axios';

export default function addVan(vans) {
    const nameVan = vans.nameVan;
    const totalSeats = vans.totalSeats;

    return (dispatch) => {
        axios.post('URL', { nameVan, totalSeats })
            .then((response) => {
                //callback();
                const vans = response.data;
                dispatch(addVansAsync(vans))
            })
    }
}

function addVansAsync(vans) {
    return {
        type: ADD_VANS,
        payload: vans
    };
}

Функция, вызывающая действие

  addRiderToVan() {
        const riderInfo = this.props.riderInfo;
        const vanArray = this.state.vansChecked;
        const availSeats = (vanArray.availSeats - riderInfo.numParty);
        riderVan(vanArray, riderInfo, availSeats);
    }

Меня не беспокоит отправка информацииЧтобы отправить в это время, я просто хочу, чтобы мой возврат был вызван при запуске действия.

Вот код для компонента

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import FormControl from '@material-ui/core/FormControl';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import { connect } from 'react-redux';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';
import { Button } from '@material-ui/core';
import riderVan from '../store/actions/riderVan';
import { bindActionCreators } from 'redux';

const styles = theme => ({
    root: {
        display: 'flex',
    },
    formControl: {
        margin: theme.spacing.unit * 3,
    },
});

class AddToVan extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            vansChecked: []
        }
        this.handleChange = this.handleChange.bind(this);
        this.addRiderToVan = this.addRiderToVan.bind(this);
    }
    handleChange = name => event => {
        this.setState({ [name]: event.target.checked, vansChecked: name });
    };

    addRiderToVan() {
        const riderInfo = this.props.riderInfo;
        const vanArray = this.state.vansChecked;
        const availSeats = (vanArray.availSeats - riderInfo.numParty);
        this.props.riderVan(vanArray, riderInfo, availSeats);
    }

    render() {
        const { classes, vansList } = this.props;
        const { vanIsChecked, vanInfo } = this.state;

        return (
            <Dialog
                aria-labelledby="form-dialog-title"
                open={this.props.open}
                onClose={this.props.close}
                aria-labelledby="form-dialog-title"
            >
                <DialogTitle id="form-dialog-title">Add to Van</DialogTitle>
                <DialogContent>
                    <FormControl component="fieldset" className={classes.formControl}>
                        <FormGroup>
                            {vansList.map(van => {
                                return (
                                    <FormControlLabel
                                        key={van.P_Key}
                                        checked={vanIsChecked}
                                        control={
                                            <Checkbox checked={vanIsChecked}
                                                onChange={this.handleChange(van)}
                                            />
                                        }
                                        label={van.nameVan}
                                        id="nameVan"
                                        value={van.nameVan}
                                        name="nameVan"
                                    />
                                )
                            })}
                        </FormGroup>
                    </FormControl>
                </DialogContent>
                <DialogActions>
                    <Button onClick={this.props.close} color="primary">
                        Cancel
                    </Button>
                    <Button onClick={this.addRiderToVan} color="primary">
                        Save
                    </Button>
                </DialogActions>
            </Dialog>
        );
    }
}

AddToVan.propTypes = {
    classes: PropTypes.object.isRequired,
};

function mapStateToProps(state) {
    return {
        vansList: state.vansList,
    }
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({
        riderVan: riderVan,
    })
}


export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(AddToVan));

Answer 1

Необходимо добавить следующее в мой компонент:

function mapDispatchToProps(dispatch) {
    return bindActionCreators({
        riderVan: riderVan,
    }, dispatch)
}

Мне также пришлось вызывать свое действие, используя this.props, как показано ниже, а не просто имя функции.

 this.props.riderVan(vanArray, riderInfo, availSeats);