Должны ли были быть сделаны расчеты на основе данных о реаги-редуксе?

Question

Я работаю над своим первым веб-приложением, и в начале я сосредоточился на визуальном аспекте отображения данных. Один из моих компонентов - горизонтальный список дат на основе сетки. Теперь, как вы видите, я просто беру от даты начала и окончания json. На его основе я создаю массив всех дней из диапазона, который будет отображаться в моем компоненте.

Теперь я хочу, чтобы этот компонент работал с данными, вводимыми пользователем для даты начала и окончания. Если я буду использовать избыточность, чтобы сохранить 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;

Answer 1

Если вы добавите Redux, у вас будет доступ к startDate и endDate в компоненте DaysRow. Например, вы можете сделать это следующим образом

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)

Answer 2

Если вы используете библиотеку управления состояниями, такую ​​как Redux, я бы рекомендовал поместить производное состояние в селекторы . Вы можете использовать библиотеку, например , повторно выбрать или просто создать функцию state. Например:

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

И тогда в вашем компоненте вы можете использовать селектор в mapStateTopProps:

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