如何从React Redux中的子组件进行调度

How can I dispatch from child components in React Redux?

本文关键字：组件 调度 React Redux      更新时间：2024-04-26

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

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

CCD_ 2明显具有更多的嵌套成分。

我有一门更深层次的课：

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，我真正想做的是调度一个事件来设置reducer中的状态。我在网上做过一些关于上下文的事情，但我得到了褒贬不一的评价，因为这个功能过去或不会消失。

编辑我看到了这个连接方法，但我可以发誓我不会在children组件中使用connect。

您太沉迷于子组件了。你应该构建你的应用程序，使你有连接的组件和非连接的组件。非连接组件应该是无状态的，本质上是纯函数，通过props接受它们的所有需求。连接的组件应该使用connect函数将redux状态映射到props，将redux调度器映射到prop，然后负责将这些props传递给子组件。

应用程序中可能有很多连接的组件，也可能有很多未连接的组件。这篇文章（由redux的创建者撰写）更详细地讨论了它，并谈到了非连接（dumb）组件负责UI的实际显示，连接（smart）组件负责组成非连接组件。

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

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是非连接组件。

过去有人建议尽量限制连接的组件。参见示例：

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

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

无论如何，这对于将一部分状态委派给组件来说确实更有用。如果这对您的情况有意义，您可以这样做，或者如果您不想传递调用dispatch()的回调，如果您愿意，您可以传递存储或向下调度层次结构。

相关文章：