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

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派遣一个事件来在减速器中设置状态.我已经在网上关于上下文的一些事情,但我得到了不同的评论,因为该功能已经或不会消失.

编辑 我看到这个连接方法,但我可以发誓我读过不要connect在儿童组件中使用.

Answer 1

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

您可能在应用程序中有许多连接的组件,以及许多未连接的组件.这篇文章(由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是非连接组件.