Question

我正在构建一个Redux应用程序（我的第一个）并且有点不清楚操作之间的耦合程度是多少。

我的应用程序有多种形式，其值在网址中序列化。

例如，存在用于特定搜索的输入字段，并且在键入时，更新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这样的行为感觉不对劲。这个动作本身并不存在......它依赖于其他行动首先被派遣。

这种行为之间的耦合代码闻到了吗？是否有任何常用的技术可以解除这些行为/重构这些行为？

Answer 1

我认为将链接同步动作完全没问题。您还可以使用redux-thunk之类的中间件来实现此目的，使其更易于阅读（因为您将动作调度程序功能存储为动作创建程序）。以下是关于此主题的article。

Answer 2

我就是这样做的，

定义了一个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"
  });
};

Redux操作取决于/耦合到其他操作

2 个答案: