React + Redux，我的與UI相關的計算應該放在哪裏，容器組件還是reducer？

我正在從事一個大型的react/redux項目，我正在努力尋找react/redux的最佳實踐。React + Redux，我的與UI相關的計算應該放在哪裏，容器組件還是reducer？

例如，如果我有一個餅圖部件，這將需要一個簡單的數組作爲支柱：

[{ 
    label: 'a', 
    value: 10 
}, { 
    label: 'b', 
    value: 6 
}, ...]

但源數據I從API服務器獲取可以是這樣的：

{ 
    a: { 
    value1: 15, 
    value2: 3, 
    value3: 7, 
    ... 
    }, 
    b: { ... } 
}

現在我必須做一些計算，得到的結果數據（如值1 -value2 +值3 ...也許一些過濾器...），問題是，我應該把這個計算在減速（我覺得它更像一個吸氣，這將經由connect道具到組件被傳遞，如getCartProductsin this example）或容器組件（可以是控制板在這種情況下）？

我覺得這兩個選項意義：

在減速：我們能夠保持我們的組件乾淨，並把所有的邏輯在同一個地方。
在容器中：因爲它與用戶界面相關，並且如果計算的數據不可重複使用（僅適用於該餅圖），我們可以在相關組件中保留這種計算。

如果我選擇減速器，那麼會出現另一個問題。我應該將計算的數據保存在商店中嗎？或者只保存源數據，並在每次渲染組件時計算它？ The old React doc表示你不應該保存計算數據的狀態，不知道是否對於redux是真的。

來源

2016-12-13 CodinCat

一般：

店應該包括最小可能的狀態。
在mapStateToProps中通過reselect, 來計算耙動數據以記憶結果。計算將立即被調用;

但是： 如果獲得的數據的形狀從在應用程序中使用（或者你需要一些計算）形狀不同，那麼你可以計算後立即取出。（例如，它可能是正常化的數據）

我認爲你應該堅持收集而不是數組，因爲通過密鑰獲取數據要簡單得多。並且如果您不打算編輯特定項目的值，則可以使用簡化器對其進行預先計算。

例如通過選擇器計算：

使用選擇器組合物，以避免重新計算在更新過濾器：

import map from 'lodash/map'; 
import { createSelector } from 'reselect'; 

const getFilterKeys=(state)=>state.filter; //['a','b','c'] 
//(btw it's just example... filter may be in props); 

const getItems=(state)=>state.entities.items; 


const calculateValues = (item) => item.value1 - item.value2 + item.value3; 

export const getItemsForChart = createSelector(
    [getItems], 
    (items)=> map(items,(item,key)=>({label:key, value:calculateValues(item)})) 
); 

export const getItemsForChartWithFilter = createSelector(
    [getItemsForChart, getFilterKeys], 
    (items, filterKeys)=> items.filter(item=>filterKeys.some(key=>key==item.label)) 
);

。

const mapStateToProps=(state)=>{ 
    return { 
    chartData:getItemsForChartWithFilter(state) 
    }; 
};

順便說一句集合中的順序是不能保證的，因此也許你應該從服務器的數組中收集除了集合。然後代碼會有點不同...

來源

2016-12-13 12:16:28

React + Redux，我的與UI相關的計算應該放在哪裏，容器組件還是reducer？

回答

相關問題