取决于/耦合到其他动作的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动作

回答

相关问题