Reactjs 将react redux与connect（）和{…this.props}一起使用

当我想从其他组件调用容器中的操作时，我想使用spread运算符，因为我需要在组件中传递太多参数，而不想描述所有参数，所以我不知道如何制定正确的解决方案

我知道我可以通过道具从redux商店传递所有道具，如菜单中的示例，但我的组件太嵌套了，我必须在嵌套的第十八个组件中发送道具

render（）{
返回(
);
}
}
常量mapStateToProps=reduxStore=>(
{
应用程序：reduxStore.app
}),
mapDispatchToProps=dispatch=>（{appActions:bindActionCreators（appActions，dispatch）}）；
导出默认连接（mapStateToProps、mapDispatchToProps）（应用程序）这里是一个功能示例。我是为一个私人项目做的。出于示例的目的，我删除了无用的代码。
您可能希望得到的是eslint，它将显示人们在编码时犯的基本错误

例如，它会说您已经声明了proptype。在你的代码中，它在哪里说什么是应用程序？当然它来自reduxStore.app，但它是什么类型的道具

此外，您不应该将所有reduxStore状态链接到您的组件。你应该只导入你真正需要的东西。在我的示例中，我仅从
state.app.users
导入
用户。如果我有更多，或者想要reducer状态的所有元素，我会单独导入所有元素，然后像这样声明道具：

 Home.propTypes = {
        users: PropTypes.object.isRequired,
        actions: {
            load: PropTypes.func.isRequired,
        },
    };

因为JavaScript不是类型化语言，所以上面的proptype可以帮助您进行类型化验证。您还可以看到props
actions
，其中包含您在案例中导入的所有函数

要了解如何使用后续操作中的函数，请查看我的
componentWillMount（）

import React，{Component，PropTypes}来自'React'；
从“react native”导入{ListView}；
从'react redux'导入{connect}；
从“redux”导入{bindActionCreators}；
从“../../actions/appActions”导入*作为应用程序；
const ds=new ListView.DataSource（{rowHasChanged:（r1，r2）=>r1！==r2}）；
类Home扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据源：ds.cloneWithRows（props.users.toJS（）），
};
}
组件willmount（）{
this.props.actions.load（）；
}
组件将接收道具（下一步）{
if（this.props.users！==nextrops.users）{
这是我的国家({
数据源：ds.cloneWithRows（nextrops.users），
});
}
}
render（）{
返回(
}
/>
);
}
}
Home.propTypes={
用户：PropTypes.object.isRequired，
行动：{
加载：需要PropTypes.func.isRequired，
},
};
函数MapStateTops（状态）{
返回{
用户：state.app.users，
};
}
功能图DispatchToprops（调度）{
返回{
操作：bindActionCreators（应用程序、调度），
};
}
导出默认连接（mapStateToProps、mapDispatchToProps）（主页）；

希望这对你有帮助；）

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

    import * as app from '../../actions/appActions';

    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });

    class Home extends Component {

        constructor(props) {
            super(props);
            this.state = {
                dataSource: ds.cloneWithRows(props.users.toJS()),
            };
        }

        componentWillMount() {
            this.props.actions.load();
        }

        componentWillReceiveProps(nextProps) {
            if (this.props.users !== nextProps.users) {
                this.setState({
                    dataSource: ds.cloneWithRows(nextProps.users),
                });
            }
        }

        render() {
            return (
                  <ListView
                      dataSource={this.state.dataSource}
                      enableEmptySections
                      renderRow={
                          (rowData) => <User haveLunch={rowData.haveLunch} name={rowData.name} />
                      }
                  />
            );
        }
    }

    Home.propTypes = {
        users: PropTypes.object.isRequired,
        actions: {
            load: PropTypes.func.isRequired,
        },
    };

    function mapStateToProps(state) {
        return {
            users: state.app.users,
        };
    }

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

export default connect(mapStateToProps, mapDispatchToProps)(Home);