取決於/耦合到其他動作的Redux動作

我正在構建Redux應用程序（我的第一個），並且我不清楚動作之間有多少耦合。取決於/耦合到其他動作的Redux動作

我的應用程序有幾種形式，其值在url中被序列化。

例如，對於特定搜索有一個輸入字段，並且在鍵入時更新url參數。還有其他幾個輸入字段遵循這種模式。

在我的頂級index.js我有幾個代碼塊看起來像這樣：

// Within the declaration of a high-level component 
onForm1Change={(key, value) => { 
     // Listened to by "formValues" state cross-section reducer 
     store.dispatch({ 
      type: actions.FORM1_CHANGE, 
      key: key, 
      value: value 
     }); 

     // Listened to by "url" state cross-section reducer, leads to a url param update. 
     // Has it's own logic that is based upon the formValues state. 
     // Must run after FORM1_CHANGE finishes 
     store.dispatch({ 
      type: actions.UPDATE_URL, 
      formValues: store.getState().formValues 
     }); 
    } 
}

有關行動喜歡的東西UPDATE_URL感覺不對。這一行動並不是獨立的......它依靠其他行動首先派遣。

這種行爲之間的耦合是一種代碼氣味？是否有任何常見的技術去耦合/重構這些行爲？

來源

2017-05-30 Jonathan.Brink

調度的主要目的是改變在店裏的狀態。 UPDATE_URL操作沒有意義，因爲它正在發送來自存儲區內的數據，所以沒有任何更改。 –

@DJ。我可能不太清楚這一點，但偵聽UPDATE_URL的reducer不是簡單地傳遞數據......它有自己的邏輯需要運行，它使用傳入的formValues作爲輸入（我添加了一個代碼評論以反映這一點） –

我認爲這是鏈接同步操作的完全可行的方法。您也可以使用像redux-thunk這樣的中間件來實現這個目的，使其更易於閱讀（因爲您將把動作分派器功能存儲爲動作創建者）。以下是關於此主題的一些article。

來源

2017-05-30 06:32:45 GProst

這是我做到了，

定義的終極版商店中間件如果被派遣的行動有它queryString屬性，更新網址，將檢測。

import createHistory from "history/createBrowserHistory"; 

function queryStringMiddleware(history) { 
    return store => next => action => { 
    const { payload } = action; 
    if (payload.queryString) { 
     history.push({ 
     search: queryString 
     }); 
    } 
    next(action); 
    }; 
} 

const history = createHistory(); 
const middlewares = [queryStringMiddleware(history)]; 
const store = configureStore({}, middlewares);

然後在動作：

const onForm1Change = (key, value) => { 
    store.dispatch({ 
    type: actions.FORM1_CHANGE, 
    key: key, 
    value: value, 
    queryString: "?the=query" 
    }); 
};

來源

2017-05-30 10:51:34 Faris

取決於/耦合到其他動作的Redux動作

回答

相關問題