Redux, Fetch и где использовать .map

Рассмотрим этот сценарий:
приложение загружает => извлекает json из api => необходимо изменить возвращенный json

В этом случае я использую момент, чтобы внести некоторые изменения в дату и выполнить некоторую группировку, которую я буду использовать в пользовательском интерфейсе. Я просмотрел стек и нашел аналогичный вопрос, но я не чувствовал, что он обеспечивает ясность, которую я ищу.

  1. Где мне использовать .map для создания новых объектов, содержащих отформатированные и сгруппированные даты? Должен ли я манипулировать необработанным json в вызове api или в действии redux перед отправкой? Какая лучшая практика?

  2. Можно ли добавлять свойства и изменять объект, как показано ниже, service["mStartDate"] = mStartDate до, когда я помещаю данные в свое хранилище и рассматриваю их как неизменное состояние?

Первый подход - изменение необработанного json в вызове API

      class TicketRepository extends BaseRepository {
        getDataByID(postData) {
          return this.post('api/lookup', postData)
          .then(result => {
            const groupedData = {}
              return result.map(ticket => {
                  const mStartDate = moment(ticket.startDate)
                  const mEndDate = moment(ticket.endDate)            
                  const serviceLength = mStartDate.diff(mEndDate,'hours')
                  const duration = moment.duration(serviceLength,"hours").humanize()
                  const weekOfYear = mStartDate.format('WW')
                  const dayOfWeek = mStartDate.format("d")

                  if(!groupedData.hasOwnProperty(weekOfYear)){
                    groupedData[weekOfYear] = {}
                  }

                  if (!groupedData[weekOfYear].hasOwnProperty(dayOfWeek)) {
                  groupedData[weekOfYear][dayOfWeek] = []
                  }            

                  service["mStartDate"] = mStartDate
                  service["mEndDate"] = mEndDate
                  service["serviceLength"] = serviceLength
                  service["duration"] = duration
                   groupedData[weekOfYear][dayOfWeek].push(service)
                })                    
          })
        }
      }

2-й подход, сделайте простой вызов API

  class TicketRepository extends BaseRepository {
    getDataByID(postData) {
      return this.post('api/lookup', postData)
    }
  }

Измените json в действии перед отправкой

    export function getDataByID() {
      return (dispatch, getState) => {
        dispatch(dataLookupRequest()) 
        const state = getState()

        const groupedData = {}
        return TicketRepository.getDataByID(userData)
          .then(result => {
            const groupedData = {}
              return result.map(ticket => {
                  const mStartDate = moment(ticket.startDate)
                  const mEndDate = moment(ticket.endDate)            
                  const serviceLength = mStartDate.diff(mEndDate,'hours')
                  const duration = moment.duration(serviceLength,"hours").humanize()
                  const weekOfYear = mStartDate.format('WW')
                  const dayOfWeek = mStartDate.format("d")

                  if(!groupedData.hasOwnProperty(weekOfYear)){
                    groupedData[weekOfYear] = {}
                  }

                  if (!groupedData[weekOfYear].hasOwnProperty(dayOfWeek)) {
                  groupedData[weekOfYear][dayOfWeek] = []
                  }            

                  service["mStartDate"] = mStartDate
                  service["mEndDate"] = mEndDate
                  service["serviceLength"] = serviceLength
                  service["duration"] = duration
                   groupedData[weekOfYear][dayOfWeek].push(service)
                })
                return groupedData   
          })
          .then(groupedData => {
            dispatch(lookupSuccess(groupedData))
          })
          .catch(err => dispatch(dataLookupFailure(err.code, err.message)))
      }
    }

person Jonathan M.    schedule 14.03.2017    source источник


Ответы (1)


Все манипуляции с данными должны выполняться вашим редуктором. То есть возвращенные данные ответа должны быть переданы редуктору. Это обычная практика, потому что таким образом, если есть проблема с вашими данными, вы всегда будете знать, где искать - reducer. Так что ни один из ваших подходов не является «правильным». Действия должны просто принимать некоторые входные данные и отправлять объект (без манипуляций с данными).

Если вы хотите манипулировать данными только для «просмотра», рассмотрите возможность использования библиотеки reselect, которая упрощает для обработки «представлений данных», состоящих из существующих данных.

person Deividas Karzinauskas    schedule 14.03.2017