Javascript Redux——应该在哪里进行重载——减速器、动作、容器或表示组件？

我一直在尝试实现所教的容器/表示组件范例。然而，对于我的一些代码应该放在哪里，我有点困惑

假设我有一个简单的项目列表。单击一个项目时，应将其从列表中删除。修改列表的代码应该放在my reducer、action creator、container组件还是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>
    );
  }
});

最后是表象部分：

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>
    );
  }
});

从“React”导入React；
module.exports=React.createClass({
showRows:function（）{
返回此.props.items.map（item=>{
返回(
{item.title}
);
});
},
render:function（）{
返回(

{this.showRows（）}

);
}
});

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

我可以看到它在presentational组件中运行，然后在修改列表后从容器组件调用onItemClicked回调

我可以看到它在容器组件中运行，因此呈现组件尽可能地愚蠢。不过，我需要一种访问状态的方法（获取项目），因为我已经将项目作为道具传递到呈现组件中，所以在那里进行操作对我来说更有意义

我可以在action creator中看到它的运行，删除的项作为removeItem函数的第二个参数

将它放在reducer中似乎不是一个好主意，因为执行一系列计算（修改数组）似乎应该在调度操作之前发生，而不是之后

---

修改阵列的繁重工作应该在哪里进行？它似乎应该放在表象部分，但我知道那些应该是愚蠢的部分…

你应该这样想：

DumbComponent（查看/接受输入）->SmartComponent（通过触发分派响应输入）->ActionCreator（创建必要的操作，必要时提供有效负载-在本例中，是需要过滤掉的索引）->Reducer（通过修改并返回新状态来响应操作）

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

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

---

因此，在减速器中进行计算/重载，如果它修改了状态，代码应该在状态被修改的地方。

我将以减速器为例。减速器是你改变状态的地方。它应该放在减速器里。减速器负责响应动作并返回一个新状态，因此在这种情况下，您将返回一个新状态，同时删除项目。因此，组件的工作只是调度动作，动作只是通知减速器（带有效负载），减速器的工作是执行重起？是的。想想ui=fn（状态）。UI部分应该是所有的react内容，并且应该从redux商店获取道具。Redux负责获取一个状态对象，处理它，并返回一个新的状态对象作为React中的道具传递。两者之间的通信是通过分派和操作进行的，其中组件或thunked操作（对于异步信息）可能会以有效负载（索引、用户ID等）的形式将类型以外的必要信息发送到减速器，这几乎可以看作是fn参数减速机可以用来修改状态。@GeoffreyAbdallah:为什么动作不能完成繁重的提升？所以所有的逻辑都保留在那里，存储只是修改它所提供的内容。并且任何操作（除此之外）也可以修改state@AbhinavSingi理论上你可以，没有什么能阻止你这么做。也就是说，我认为关于分离关注点，在商店中处理重物更有意义。这有两个方面-我将操作视为视图和存储之间的消息，无论它们是同步的还是异步的（因此它们应该是轻量级的），并且因为服务器之外的任何进一步提升（对于异步有效负载）都应该在存储中完成，以便轻松识别状态从A到B的原因和方式（如果在这三个地方都进行了计算，那么这就更难做到了）。