Question

我一直在尝试实现教授here的容器/表示组件范例。但是，我对某些代码应该去的地方感到有些困惑。

假设我有一个简单的项目列表。单击一个项目时，应将其从列表中删除。修改列表的代码应该放在我的reducer，action creator，container component还是presentational组件中？

减速机：

case 'REMOVE_ITEM':
  return Object.assign({}, state, {items: action.value})

行动创作者：

export function removeItem(items) {
  return {
    type: 'REMOVE_ITEM',
    value: items
  };
}

现在我们的容器组件：

import ItemsList from './ItemsList';
import { connect } from 'react-redux';
import * as actions from './actions';

var mapStateToProps = function(state) {
  return {
    items: state.itemsList.items
  };
};

var mapDispatchToProps = function(dispatch) {
  return {
    onItemClicked: function(items) {
      dispatch(actions.removeItem(items));
    }
  };
};

var ItemsListContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(ItemsList);

module.exports = ItemsListContainer;

最后是演示组成部分：

import React from 'react';

module.exports = React.createClass({
  showRows: function() {
    return this.props.items.map(item => {
      return (
        <li key={item.id} onClick={this.props.onItemClicked}>{item.title}</li>
      );
    });
  },

  render: function() {
    return (
      <ul>
        {this.showRows()}
      </ul>
    );
  }
});

然后，在某些时候，我们需要一些代码来删除列表项。单击该项目时，我们需要将其从项目列表中拼接出来。该代码应该放在哪里？

我可以看到它出现在演示组件中，然后在修改列表后从容器组件调用onItemClicked回调。

我可以看到它进入容器组件，因此表示组件尽可能愚蠢。虽然我需要一种方法来访问状态（获取项目），并且因为我已经将这些项目作为道具传递到演示组件中，所以在那里进行操作会更有意义。

我可以看到它在动作创建器中，删除的项目作为removeItem函数的第二个参数。

将它放在reducer中似乎是一个坏主意，因为做一堆计算（修改数组）似乎是在调度操作之前应该发生的事情，而不是之后。

修改阵列的繁重地方应该在哪里发生？它似乎应该出现在演示组件中，但我知道那些应该是愚蠢的组件......

Answer 1

你应该这样考虑：

DumbComponent（查看/接受输入） - ＆gt; SmartComponent（通过触发调度来响应ToToutInput） - ＆gt; ActionCreator（创建必要的操作，在必要时提供有效负载 - 在这种情况下，您需要过滤掉的索引） - ＆gt; Reducer（通过修改和返回新状态来响应操作。）

在您的减速机中，您将执行以下操作：

return Object.assign({}, state, { items: state.items.filter((item, index) => index !== payload) });

在reducer中进行计算/繁重操作，如果修改状态，则代码应该是修改状态的位置。

Redux - 重负荷应该发生在哪里 - 减速器，动作，容器或演示组件？

1 个答案: