如何从React Redux的子组件中分派？

小编典典

如何从React Redux的子组件中分派？

reactjs

我的服务器具有如下代码：

<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调度一个事件以在reducer中设置状态。我已经在网上找到了一些有关上下文的东西，但是由于该功能已经消失或没有消失，我收到了很多评论。

编辑我看到此连接方法，但我可能发誓我读过不要connect在子组件中使用。

阅读 262

2020-07-22

共1个答案

小编典典

您太在意子组件了。您应该对应用程序进行结构设计，以使您具有已连接的组件和未连接的组件。未连接的组件本质上应该是无状态的纯函数，它们通过props满足所有要求。连接的组件应使用该connect功能将redux状态映射到prop，并将redux调度程序映射到prop，然后负责将这些prop传递给子组件。

一个应用程序中可能有很多连接的组件，而很多未连接的组件。这篇文章（由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是一个未连接组件。

2020-07-22