商店的一部分依賴於其他部分

作爲一種場景，用戶可以單擊按鈕來創建時間戳列表，以顯示進行點擊時的相應時間。用戶也可以點擊列表上的項目來刪除項目。商店的一部分依賴於其他部分

就商店而言，有一個計數器狀態用於跟蹤按鈕被點擊的次數，然後是另一個跟蹤時間戳列表的狀態。列表狀態中的每個項目都有一個從計數器狀態派生的ID字段。所以商店的一部分取決於另一部分。

作爲一種嘗試，我派遣一個動作，並且兩個減速器處理相同的動作，並且它工作正常，但只是它不是DRY。在調度之前，我必須在計數器狀態中加1以獲得用作動作負載的新ID，在調度之後，我再次向計數器狀態加1以返回新的計數器狀態。這是重複自己。

處理此類問題的一般標準方法是什麼？

來源

2017-07-04 Andy

一般的簡單方法是使用thunk。您需要設置一箇中間件，檢查出的文檔： https://github.com/gaearon/redux-thunk

這可以讓你派遣一個函數，而不是一個簡單的動作。在該功能中，您可以根據需要多次訪問狀態和調度。

在您的方案中，您將首先增加計數器，然後檢索長度以獲取您的新ID，然後調度另一個操作以創建時間戳。

一些虛的代碼爲您的行動創造者：

// basic action creators to be handled in your reducers 
function incrementCounter(){ 
    return { type: 'INCREMENT'} 
} 
function createTimestamp(id){ 
    return { type: 'CREATE_TS', id } 
} 
// this is the thunk 
function incrementAndTimestamp(){ 
    return (dispatch, getState) => { 
    // increment the counter 
    dispatch(incrementCounter()) 
    // generate an "id" from the resulting state 
    const newId = getState().counter.length 
    // and use that id to further update your state 
    dispatch(createTimestamp(newId)) 
    } 
}

您將需要處理在減速的2個不同的行動和你現在兩個代碼獨立的部分。 thunk是分發的膠水，從一個部分獲取數據，並使用它來影響另一部分。

來源

2017-07-04 10:23:05 CharlieBrown

與從組件派發2個動作而不使用thunk有什麼不同？ – Andy

不同之處當然是封裝：你的組件不需要知道引擎蓋下什麼時候想要做他的東西。單獨測試組件和動作創建者會更容易。這是解決您的問題的通用解決方案，但不同的場景可能需要稍微調整。 :) – CharlieBrown

商店的一部分依賴於其他部分

回答

相關問題