Question

我开始学习Redux并且整个想法看起来很整洁，但是从＃34;正常＆＃34;重建我的React应用程序之后to＆＃34; redux-way＆＃34;这个问题出现了。

我有一个列表，列出了我根据异步调用的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);

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

如果您不想或不想看，我们不会被迫拆分它，但现在我们可以将ListItem重新用于其他点击处理程序，因为它不依赖于调度特定的操作props.content与特定状态无关，因为我们也将其拆分到容器中。

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

1 个答案: