React + Redux - 在哑组件中调度动作？

Question

我开始学习Redux并且整个想法看起来很整洁,但是在将我的React应用程序从"正常"重建为"redux-way"之后,出现了这个问题.

我有一个列表,列出了我基于异步调用的JSON构建的项目.然后该列表上的每个项目都会在点击时发送异步调用并返回一些内容.

在我的应用程序非常简单之前:

components/list/List.jsx
components/list/ListItem.jsx

现在它看起来像这样:

footer/list/ListContainer.jsx // here I run an async call and generate list
footer/list/List.jsx // dumb component creating the whole list full of ListItemContainer components as <li>
footer/list/ListItemContainer.jsx // here I run another async for each <li>
footer/list/ListItem.jsx // dumb component containing <li>

IMO要复杂得多,但还有另外一个问题.

每次我点击我的<li>组件我想触发一个动作然后做一些事情,我的问题是:我可以在ListItem.jsx中做到吗？我不这么认为,因为它是一个愚蠢的组成部分？

这是我的ListItem.jsx:

import React from 'react';
import { connect } from 'react-redux';

// some other imports

class ListItem extends React.Component {

  render(props) {
    return (
      <li>
        <a href="#" onClick={//can I do something here?//}>
          {this.props.contents}
        </a>
      </li>
    )
  }
}

export default ListItem;

Answer 1

只需将点击处理程序传递给您的哑组件即可.愚蠢的组件只是一个不关心它获得的道具来源的组件.这并不意味着它不能调用函数或任何东西.我们以这种方式将它们拆分的原因是我们可以在其他地方重复使用从不同来源获取道具的哑组件.

@bennygenel答案大部分时间都很好,所以我不知道他为什么删除它.

这是我要做的:

ListItem.js:

// Dumb component (very re-usable)

const ListItem = props => (
    <li>
        <a href="#" onClick={props.onClick}>
          {props.contents}
        </a>
    </li>
);

export default ListItem;

ListItemContainer.js:

// Smart component
import action from 'someAction';

const mapStateToProps = (state) => ({
    contents: state.something.contents,
});

const mapDispatchToProps = {
    onClick: action,
};

export default connect(mapStateToProps, mapDispatchToProps)(ListItem);

我们onClick在mapDispatchToProps中绑定处理程序,这会自动将处理程序包装在一个调度中,这样当用户单击列表项时它会正确调度.

如果你不想或不想看到需要,你不会被迫拆分它,但现在我们可以重新使用ListItem其他点击处理程序,因为它不依赖于调度特定的操作并且props.content不依赖于特定的状态,因为我们也将它分成了容器.