Redux、Fetch 以及在哪里使用 .map

Question

考虑这种情况：
应用加载 => 从 api 获取 json => 需要修改 json 返回

在这种情况下，我使用 moment 进行一些日期修改并进行一些我将在 UI 中使用的分组。我查看了堆栈并找到了一个但我觉得它没有提供我正在寻求的清晰度。

我应该在哪里使用 .map 创建包含格式化和分组日期的新对象？我应该在调度之前在 api 调用或 redux 操作中操作原始 json 吗？最佳做法是什么？
是否可以添加属性并改变对象，如下所示， service["mStartDate"] = mStartDate before 我将数据放入我的存储并将其视为不可变状态？

First Approach - changing raw json in the api call

      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)
                })                    
          })
        }
      }

2nd Approach, make a simple api call

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

Change the json in the action before dispatching

    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)))
      }
    }

Answer 1

所有数据操作都应由您的减速器处理。也就是说，返回的响应数据应该传递给一个reducer。这种做法很常见，因为这样，如果您的数据出现问题，您将始终知道去哪里查找 - reducer。因此，您的两种方法都不是 "correct"。动作应该只接受一些输入并分派一个对象（没有数据操作）。

如果您只想出于 'view' 目的操作数据，请考虑使用 reselect 库，这样可以更轻松地处理由现有数据组成的 "data views"。

Redux、Fetch 以及在哪里使用 .map

Redux, Fetch and where to use .map

json

reactjs

redux

fetch

redux-thunk