小编典典

如何从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在子组件中使用。


阅读 263

收藏
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