2017-03-14 64 views
0

考慮這種情況:
應用程序加載=>從API獲取JSON =>需要修改JSON返回終極版,取何地使用.MAP

在這種情況下,我使用的時刻做出一些日期修改和做一些分組,我將在UI中使用。我看着堆棧,發現一個similar question,但不覺得它提供了我正在尋求的清晰度。

  1. 我應該在哪裏使用.MAP創建包含格式化的&分組日的新對象?我應該在調用之前操作api調用中的原始json還是在redux操作中?最佳做法是什麼?

  2. 是否確定添加屬性和變異的對象,因爲我在下面顯示, service["mStartDate"] = mStartDate之前,我把數據放到我的店裏,並把它當作一成不變的狀態?

第一種方法 - 在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) 
       })      
      }) 
     } 
     } 

第二個方法改變原始JSON,做一個簡單的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))) 
     } 
    } 

回答

0

所有的數據操作前,應通過你的減速處理。也就是說,返回的響應數據應該傳遞給reducer。這種做法很常見,因爲這樣如果數據出現問題,您將永遠知道在哪裏尋找 - 縮減器。所以你的方法都不是「正確的」。操作應該只需要一些輸入和分派一個對象(不需要數據操作)。

如果您只想操作數據以用於「查看」目的,請考慮使用reselect庫,這可以更輕鬆地處理由現有數據組成的「數據視圖」。