1

最近，我开始学习reselect，并尝试在我的项目中使用它。

但是，我怀疑我应该把计算派生数据的代码放在哪里。

下面是我的代码片段，我想我把formatDate calcDayLeftFromNow setDeriveData逻辑放到我的reducer也可以。

我做派生数据计算reducer也可以。

如果我这样做，似乎没有理由使用reselect.

function formatDate(millisecond) {
  let d = new Date(millisecond);
  let dateArr = [d.getFullYear(), d.getMonth() + 1, d.getDate()];
  let date = dateArr.join('.');
  return date;
}

function calcDayLeftFromNow(endTimeNum) {
  const timeDiff = endTimeNum - new Date().getTime();
  const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
  return daysDiff;
}

function setDeriveData(coupons) {
  return Object.values(coupons).map((coupon, index) => {
    coupon.startDate = formatDate(coupon.startTimeNum);
    coupon.endDate = formatDate(coupon.endTimeNum);
    coupon.dayLeft = calcDayLeftFromNow(coupon.endTimeNum);
    return coupon;
  });
}

const mapStateToProps = state => {
  const { coupons, current_tab, result, page } = state.yao_coupon;
  const newCoupons = setDeriveData(coupons);

  return {
    coupons: newCoupons,
    current_tab,
    result,
    page
  };
};
4

1 回答 1

2

将选择器的代码放在容器组件中是很常见的。或者，如果您不想将container 从presentational中拆分出来，只需将其放入您的组件中。

选择器的作用是计算来自状态（存储）的派生数据。

而 reducer指定应用程序的状态如何响应 action 变化。

因此，它们在您的应用程序中扮演着非常不同的角色。

在Reselect 自述文件中，他们将所有内容放在一个文件中，只是为了以最简单的方式展示其用途。

这是一个常见的文件夹结构，可以帮助您理解这一点：

| reducers #folder
    date.js
| components #folder
   | Clock #folder
     ClockContainer.js #contains mapStateToProps (and your selectors) and mapDispatchToProps
     Clock.js #the clock component

有些人选择将选择器放在单独的文件中。但由您决定。例如，您可以将选择器放在容器组件中，并且仅在它变大时才将其移动到单独的文件中。将它移动到单独文件的另一个原因是，如果您在应用程序的各个部分都需要相同的选择器。（学分：@kwelch）

编辑

当我从服务器获取 bookList 数据时，我在我的 FETCH_SUCCESS 减速器中计算了derivedPrice

在 reducer 中计算派生价格将使其与 api 调用高度耦合，您将无法在其他地方使用调度的操作。我的建议是将这个计算移出减速器并derivedPrice在调度动作之前计算。

于 2017-01-06T09:17:33.943 回答