javascript - 使用 mapDispatchToProps 映射的操作不带参数

Question

父组件

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

最终，被调用的操作本身除了记录之外什么也不做:

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 值。

看起来从主组件传递到 onDoStuff 的 sourceValue 确实没有任何效果。

What do I need to do to make sure the original sourceValue is passed?

Answer 1

您需要做的就是接受箭头函数中的参数并将其传递给操作，例如

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