Combine 函数来自 mapDispatchToProps 中的 ownProps

Question

在我的 React 组件中，我希望能够结合标准操作和通过 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 decorator/function.

的第三个参数来做到这一点

定义函数，它将接收来自 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)

Combine 函数来自 mapDispatchToProps 中的 ownProps

Combine function came from ownProps in mapDispatchToProps

reactjs

redux

react-redux