Question

我的服务器有这样的代码：

<ReactRedux.Provider store={store}><Layout defaultStore={JSON.stringify(store.getState())}/></ReactRedux.Provider>

<Layout>显然有更多的组件嵌套更多。

我有一个这样的课程更深层次：

import React from 'react';

export default React.createClass({
  render: function(){
    var classes = [
      'js-select-product',
      'pseudo-link'
    ];

    if (this.props.selected) {
      classes.push('bold');
    }

    return (
      <li className="js-product-selection">
        <span onClick={this.props.onClick} className={classes.join(' ')} data-product={this.props.id}>{this.props.name}</span>
      </li>
    );
  }
});

我真正想做的事情而不是this.props.onClick是向set state in a reducer发送一个事件。我已经在网上关于上下文的一些事情，但我得到了不同的评论，因为该功能已经或不会消失。

修改我看到这个connect method但我可以发誓我已经读过不要在子组件中使用connect。

Answer 1

您过于关注儿童组件。您应该构建应用程序，以便连接组件和非连接组件。非连接组件应该是无状态的，纯粹的功能，通过道具来满足他们的所有要求。连接组件应使用connect函数将redux状态映射到props，将redux调度程序映射到props，然后负责将这些props传递给子组件。

您可能在应用中拥有大量已连接的组件，以及许多未连接的组件。 This post（由redux的创建者）更详细地讨论它，并讨论负责实际显示UI的非连接（哑）组件，以及负责组成非连接组件的连接（智能）组件

示例可能是（使用一些较新的语法）：

class Image extends React {
  render() {
    return (
      <div>
        <h1>{this.props.name}</h1>
        <img src={this.props.src} />
        <button onClick={this.props.onClick}>Click me</button>
      </div>
    );
  }
}

class ImageList extends React {
  render() {
    return (
      this.props.images.map(i => <Image name={i.name} src={i.src} onClick={this.props.updateImage} />)
    );
  }
}

const mapStateToProps = (state) => {
  return {
    images: state.images,
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    updateImage: () => dispatch(updateImageAction()),
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(ImageList);

在此示例中，ImageList是连接组件，Image是非连接组件。

Answer 2

曾经有过建议，试图限制你连接的组件。例如见：

https://github.com/reactjs/redux/issues/419

https://github.com/reactjs/redux/issues/419#issuecomment-178850728

无论如何，这对于将一片状态委托给一个组件来说真的更有用。你可以这样做，如果它对你的情况有意义，或者如果你不想传递一个调用dispatch()的回调，你可以通过商店或按照你想要的方式向下调度。

如何从React Redux中的子组件发送？

2 个答案: