Действие, сопоставленное с mapDispatchToProps, не принимает параметр - PullRequest
Новая
       10

Действие, сопоставленное с mapDispatchToProps, не принимает параметр

0 голосов
/ 26 апреля 2018

Родительский компонент 

const myParentComponent = ({ sourceValue, classes, doStuff }) => {
    return (
        <div>
            <MyComponent className={classes.iconWithText} value={sourceValue} onDoStuff={doStuff} />
        </div>
    );
}

const mapStateToProps = () => {
    ... 
}

function mapDispatchToProps(dispatch) {
    return {
        doStuff: () => dispatch(doStuffAction())
    };
}

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

использует

Дочерний компонент 

export default class MyComponent extends Component {
    handleClick = () => {
        console.info(this.props.value);

        this.props.onDoStuff(this.props.value);
    }

    render() {
        return (
            <SomeIcon className={this.props.className} onClick={this.handleClick} />
        );
    }
}

В конечном счете, вызываемое действие само по себе не делает ничего, кроме log: 

export function doStuff(value) {
    console.info('At doStuff action', value);
    return { type: DO_STUFF, value };
}

Технически все работает, ошибок нет. Но это последнее console.info в действии записывает значение как undefined. Я уверен, что это потому, что я отображаю действие onClick следующим образом: 

function mapDispatchToProps(dispatch) {
    return {
        doStuff: () => dispatch(doStuffAction())
    };
}

Если я укажу следующий параметр: 

function mapDispatchToProps(dispatch) {
    return {
        doStuff: () => dispatch(doStuffAction('123456'))
    };
}

Затем действие doStuff записывает это значение 123456.

Кажется, что sourceValue, передаваемое в onDoStuff из основного компонента, не имеет никакого эффекта.

Что мне нужно сделать, чтобы убедиться, что исходное значение SourceValue передано?

1 Ответ

0 голосов
/ 26 апреля 2018

Все, что вам нужно сделать, это принять параметр в функции стрелки и передать его в действие, подобное 

function mapDispatchToProps(dispatch) {
    return {
        doStuff: (value) => dispatch(doStuffAction(value))
    };
}

Если вам нужно передать несколько параметров, вы можете написать это как 

function mapDispatchToProps(dispatch) {
    return {
        doStuff: (value, key) => dispatch(doStuffAction(value, key))
    };
}

Если у вас есть несколько параметров, которые варьируются в зависимости от использования, скажем, от одного компонента, который вы хотите передать значение doStuffAction, а в каком-то компоненте вы хотите передать value и key, тогда предпочтительнее сделать значение как объект типа 

function mapDispatchToProps(dispatch) {
    return {
        doStuff: (obj) => dispatch(doStuffAction(obj))
    };
}

и действие: 

export function doStuff({value, key}) {
    console.info('At doStuff action', value, key);
    return { type: DO_STUFF, value };
}
...