在React-Redux中轉換API數據：Action或Reducer

我有一個天氣應用程序，api數據以不同的格式顯示，所以我組成了一個方法對象，我可以將該數據轉換爲英制格式，時間從UTC到GMT 。在React-Redux中轉換API數據：Action或Reducer

現在我有我的減速器中的數據調用這些方法。

問題：這是「好嗎」還是應該在將有效載荷傳遞給減速器之前的相應操作中完成轉換？只是好奇這是什麼樣的最佳做法。

FYI：我使用axios作爲我的諾言基於HTTP客戶端和redux-promise-middleware，redux-lodger，& redux-promise因爲我在店裏中間件。

行動者：

export const fetchCurrentWeather = (city) => { 
const url = `${CURRENT_ROOT_URL}&q=${city},us`; 
const promise = new Promise((resolve, reject) => { 
    axios.get(url) 
    .then(res => resolve(res.data)) 
    .catch(err => reject(err)); 

}); 
return { 
    type: FETCH_CURRENT_WEATHER, 
    payload: promise 
    }; 
};

減速機：

export default(state = initialState, action) => { 
const data = action.payload; 
switch (action.type) { 
    case `${FETCH_CURRENT_WEATHER}_PENDING`: 
     return {}; 
    case `${FETCH_CURRENT_WEATHER}_FULFILLED`: 
    const prefix = 'wi wi-owm-'; 
    const code = data.weather[0].id; 
    const icon = prefix + code; 
     return { 
      ...state, 
      weatherData: { 
       humidity: data.main.humidity, 
       icon, 
       name: data.name, 
       pressure: unitConverter.toInchesHG(data.main.pressure), 
       sunrise: unitConverter.toGMT(data.sys.sunrise), 
       sunset: unitConverter.toGMT(data.sys.sunset), 
       temp: unitConverter.toFarenheit(data.main.temp), 
       winddir: unitConverter.toCardinal(data.wind.deg), 
       windspd: unitConverter.toMPH(data.wind.speed) 
      }, 
      isFetched: true 
     }; 
    case `${FETCH_CURRENT_WEATHER}_REJECTED`: 
     return { 
      ...state, 
      isFetched: true, 
      err: data 
     }; 
    default: 
     return state; 
    } 
};

來源

2016-11-04 rockchalkwushock

你有三個地點，你可以有效地處理原始數據：

一個組件的render()功能

這通常不是一個好主意，因爲這意味着每次渲染組件時都會處理數據。如果您使用像reselect這樣的包，則可以通過緩存來緩解性能問題，但即使如此，實際代碼排序或篩選應保存在mapStateToProps()。
在減速

一個更好的情況下，可以進行在減速的處理數據，但我認爲，爲了清楚起見，以及關注點分離，這仍然不是最好的地方。減速機的工作非常明確 - 承認行動並將之前的狀態與行動結果合併，其他任何事情都只會模糊責任和可測性。
的動作咚

在我看來，動作形實轉換爲僅一次數據轉換如進口的原始數據的歸一化/轉化的正確位置。它不僅通常是一項明確的行動子任務（例如，獲取天氣數據 - >將攝氏溫度轉換爲華氏溫度），而且還具有不存儲無用數據（即使是暫時的狀態）的附加優點。

引述丹阿布拉莫夫：

...操作對象[是]的發生了什麼，狀態對象[是]什麼是必要的現在呈現最小表示最小表示。

最後請注意 - 選擇器

雖然我上面說的組件是不進行原始數據轉換的好地方，其實我認爲，不能進行參數將原始數據保存爲還原狀態並使用類似reselect的包根據需要通過selectors來呈現歸一化或計算值。

實現此目的的一種方法是具有selector函數，該函數在原始數據的已定義部分上執行數據規範化。使用reselect包，此轉換將被緩存，因此只執行一次。這將有lazy轉換數據只根據需要的優勢。

來源

2016-11-04 09:24:49 biofractal

謝謝！我正在考慮將轉換轉換爲動作，因爲它看起來像我仍然在執行數據上的「動作」，而減速器並不真的假設要這樣做。我會檢查'reselect'包。再次感謝！ – rockchalkwushock

在React-Redux中轉換API數據：Action或Reducer

回答

相關問題