Question

在我的反应组件中，我希望能够将标准操作和我通过ownProps收到的功能结合起来？我怎么做？后续问题是在ownProps中，我可以得到对象和函数。我想确保我不会意外地尝试将对象放入我的行动中。只有这些功能才能进入我的行动。

最终，我应该可以输入this.props.actions.standardAction1或this.props.actions.actionReceivedThruOwnProps。

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';

import * as standardActions from '../actions/standardActions';

class MyComponent extends Component {

    constructor(props) {

        super(props);
    }

    render() {

        return(
            <div>Something goes here...</div>
        );
    }
}

function mapStateToProps(state) {
    return {
        something: state.something
    }
}

function mapDispatchToProps(dispatch, ownProps) {
    return {
        actions: bindActionCreators(standardActions, dispatch)
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)

Answer 1

你可以这样做，但我不确定该函数在ownProps中的存在方式：

function mapDispatchToProps(dispatch, ownProps) {
    return {
        actions: {
         ...bindActionCreators(standardActions, dispatch),     
         ...ownProps
        }
    };
}

检查这个，如果你想从来自ownProps的函数中分离动作：

function mapDispatchToProps(dispatch, ownProps) {
    return {
        actions: bindActionCreators(standardActions, dispatch),     
        ownProps: ownProps,
        }
    };
}

然后你就这样称呼它：this.props.ownProps.actionReceivedThruOwnProps

Answer 2

您可以完全控制传递给您组件的最终道具的外观。 react-redux允许您使用connect装饰器/函数的第三个参数来执行此操作。

定义函数，它将从mapStateToProps接收映射状态，来自mapDispatchToProps的绑定动作和从父传递给组件的自己的道具。然后，根据需要合并它们。

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

function mapDispatchToProps(dispatch, ownProps) {
    return {
        ...bindActionCreators(standardActions, dispatch),
    };
}

function mergeProps(stateProps, dispatchProps, ownProps) {
    return {
        ...ownProps,
        state: stateProps,
        actions: {
            ...dispatchProps,
            ...ownProps.actions,
        },
    };
}

connect(
    mapStateToProps,
    mapDispatchToProps,
    mergeProps
)(SuperComponent)

组合函数来自mapDispatchToProps中的ownProps

2 个答案: