Reactjs 根据/耦合到其他操作的重复操作

我正在构建一个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\u URL

这样的操作感觉不对劲。此操作不是独立的…它依赖于首先发送的其他操作

---

动作之间的这种耦合是一种代码气味吗？有没有什么常用的技术来解耦/重构这些动作？

我认为这是链接同步动作的完全正确的方法。您还可以使用中间件（如用于此目的的中间件）使其更易于阅读（因为您将把actions dispatcher函数存储为action creater）。这里有一些关于这个话题的信息。

我就是这样做的

定义了一个redux存储中间件，该中间件将检测任何已调度操作是否具有

queryString

属性，并使用该属性更新url

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

---

分派的主要目的是更改存储中的状态。“更新URL”操作没有意义，因为它正在发送来自存储本身的数据，所以没有任何更改。@DJ。我可能不太清楚这一点，但是监听UPDATE_URL的reducer并不是简单地传递数据……它有自己的逻辑需要运行，它使用传入的formValues作为输入（我添加了一个代码注释来反映这一点）