要对来自 react-redux 的数据进行计算吗？答案

【问题标题】：Were to make calculations on data from react-redux?要对来自 react-redux 的数据进行计算吗？
【发布时间】：2020-05-18 16:38:42
【问题描述】：

我正在开发我的第一个 web 应用程序，一开始我专注于显示数据的视觉方面。我的组件之一是基于网格的水平日期列表。现在如您所见，我只是从 .json 开始日期和结束日期中获取。基于它，我创建了一个范围内所有日期的数组以显示在我的组件中。

现在我想让这个组件与用户输入数据一起工作，用于开始和结束日期。如果我将使用 redux 将 startDate 和 endDate 保持在全局状态，我应该进行这些“计算”，比如在一个范围之间创建一个天数组？

import React from 'react';
import styled from 'styled-components';
import GanttDayCell from 'components/atoms/GanttDayCell/GanttDayCell';
import SampleData from 'data/SampleData.json';
import moment from 'moment';

const startDate = moment(SampleData.dateRange.startDate, 'DD-MM-YYYY');
const endDate = moment(SampleData.dateRange.endDate, 'DD-MM-YYYY');

const days = [];

let currentDay = startDate;

while (currentDay.format('X') <= endDate.format('X')) {
  days.push(currentDay.format('DD-MM-YYYY'));
  currentDay = currentDay.add(1, 'd');
}

const numberOfDays = days.map(day => <GanttDayCell key={day} day={day} />);

const StyledDaysRow = styled.div`
  cursor: pointer;
  display: grid;
  grid-area: 2 / 2 / 3 / 3;
  height: 75px;
  width: 100%;
  background: linear-gradient(180deg, rgba(26, 30, 35, 1) 0%, rgba(22, 25, 29, 1) 100%);
  grid-template-columns: repeat(${days.length}, 125px);
  overflow-y: hidden;
  overflow-x: scroll;
  ::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #121418;
  }

  ::-webkit-scrollbar {
    background-color: #121418;
    height: 8px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 10px;

    border: 1px solid #121418;
    background-color: #0067ff;
  }
`;

const DaysRow = () => (

      <StyledDaysRow id="daysArea">
        {numberOfDays}
      </StyledDaysRow>
);

export default DaysRow;

【问题讨论】：

render 中的计算（派生） - redux 还为时过早 - 从一些 todo 教程中学习 react 基础知识
你能解释一下我做错了什么吗？
将数据作为props传递，从props渲染视图
仍然不确定你的意思，但我在这里创建了 startDate、endDate 和 days 数组只是为了测试我的组件是否能正确显示数据，我不想保持这种状态。
返回正常或更好的东西minimal reproducible example

标签： reactjs redux react-redux

【解决方案1】：

如果您正在使用像 Redux 这样的状态管理库，我建议将 派生状态 放在 选择器 中。你可以使用像reselect 这样的库，或者简单地创建一个state 的函数。例如：

const getDataRange = state => {
  const dateRange = // Calculate date range here
  return dateRange;
}

然后，在您的组件中，您可以使用mapStateTopProps 中的选择器：

const mapStateToProps = state => ({
  dateRange: getDateRange(state)
});

【讨论】：

【解决方案2】：

如果你添加 Redux，你可以在 DaysRow 组件中访问 startDate 和 endDate。例如，你可以这样做

const numberOfDays = (startDate,endDate) => {
const days = [];

let currentDay = startDate;

while (currentDay.format('X') <= endDate.format('X')) {
  days.push(currentDay.format('DD-MM-YYYY'));
  currentDay = currentDay.add(1, 'd');
}

 return days.map(day => <GanttDayCell key={day} day={day} />);
}
const DaysRow = ({startDate,endDate}) => (
    <StyledDaysRow id="daysArea">
        {numberOfDays(startDate,endDate)}
    </StyledDaysRow>
);

const mapStateToProps = state => ({
    startDate:state.startDate,
    endDate: state.endDate
})

export default connect(mapStateToProps, null)(DaysDate)

【讨论】：

这也是一个很好的解决方案。感谢您抽出时间向像我这样的菜鸟解释这些基本的事情。