他のアクションに依存する/実行されたReduxアクション

Question

私はReduxアプリケーションを作成しています（私の最初のものです）、アクション間のカップリングがどれほど適切かについては少し不明です。

私のアプリケーションには、URLに値がシリアル化されたいくつかのフォームがあります。

たとえば、特定の検索の入力フィールドがあり、キーアップするとurlパラメータが更新されます。このパターンに続くいくつかの入力フィールドがあります。 UPDATE_URLのようなアクションについて

// 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 
     }); 
    } 
} 

何かが右に感じることはありません：私のトップレベルindex.jsで

は、私は次のようになり、コードのいくつかのブロックを持っています。このアクションはそれ自体ではありません。最初にディスパッチされる他のアクションに依存します。

コードの匂いのアクション間のカップリングのこの種ですか？これらのアクションを分離/リファクタリングするための共通のテクニックはありますか？

Answer 1

私はそれが完全に同期アクションを連鎖させる方法だと思います。この目的のために、redux-thunkのようなミドルウェアを使用することもできます（アクションディスパッチャー関数をアクションクリエータとして保存するため）。このトピックに関するいくつかはarticleです。

Answer 2

これは私が

は、任意の派遣アクションがqueryString性質を持っているかどうかを検出し、それにURLを更新しますReduxのストアミドルウェアを定義し、それをやった方法です。次に、あなたのアクションで

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" 
    }); 
};