Question

最近，我开始学习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
  };
};

Answer 1

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

选择者的角色是从州（商店）计算衍生数据。

而减速器指定应用程序的状态如何响应操作。

因此，他们会在您的应用中扮演一个非常不同的角色。

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

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

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

Some people选择将选择器放在单独的文件中。但是由你来决定。例如，您可以将选择器放在容器组件中，只有在变大时才将其移动到单独的文件中。将其移动到单独文件的另一个原因是，您需要在应用程序的各个部分使用相同的选择器。（信用：@kwelch）

修改

当我从服务器获取bookList数据时，我在FETCH_SUCCESS reducer中计算derivedPrice

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

重新选择，我在哪里计算得出数据逻辑？

1 个答案: