Redux 操作取决于 on/coupled 到其他操作

Question

我正在构建一个 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 之类的操作有些地方感觉不对。此操作不是独立存在的...它依赖于首先调度的其他操作。

这种行为之间的耦合是一种代码味道吗？ de-couple/refactor这些动作有什么通用的技巧吗？

Answer 1

我认为这是链接同步操作的完全可行的方式。您也可以在这个主题上使用像 redux-thunk for this purpose to make it simpler to read (as you will store your actions dispatcher function as an action creater). Here is some article 这样的中间件。

Answer 2

我就是这样做的，

定义了一个 redux store 中间件，它将检测任何已调度的操作是否具有 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"
  });
};

Redux 操作取决于 on/coupled 到其他操作

Redux actions depending on/coupled to other actions

action

coupling

reactjs

redux