3

我用 React 和 Redux 开发了一个小型的独立网络应用程序，它托管在自己的网络服务器上。我们现在想将这个应用程序的大部分部分重用/集成到另一个 React/Redux Web 应用程序中。

从理论上讲，这应该可以很好地工作，因为我所有的 React 组件、reducer 和大多数动作创建器都是纯的。但我有一些动作创建者返回取决于应用程序状态的 thunk。他们可能会分派异步或同步操作，但这不是这里的问题。

假设我的根减速器看起来像这样：

const myAppReducer = combineReducers({
    foo: fooReducer,
    bar: barReducer,
    baz: bazReducer
});

而我最复杂的动作创建者依赖于许多状态切片（幸运的是只有少数几个）：

const someAction = function () {
    return (dispatch, getState) => {
        const state = getState();

        if (state.foo.someProp && !state.bar.anotherProp) {
            dispatch(fetchSomething(state.baz.currentId);
        } else {
            dispatch(doSomethingSynchronous());
        }
    };
}

现在的问题是我的动作创建者希望一切都在状态对象的根目录中。但是，如果我们想将此应用程序集成到另一个 redux 应用程序中，我们必须使用自己的密钥安装我的 appReducer：

// The otherAppReducer that wants to integrate my appReducer
const otherAppReducer = combineReducers({
    ....
    myApp: myAppReducer
});

这显然会破坏我返回 thunk 并需要读取应用程序状态的动作创建者，因为现在所有内容都包含在“myApp”状态切片中。

最近几天我做了很多研究并思考如何正确解决这个问题，但似乎我是第一个尝试将基于 Redux 的应用程序集成到另一个基于 Redux 的应用程序中的人。

到目前为止想到的一些技巧/想法：

  • 创建我自己的 thunk 类型，这样我就可以instanceof在自定义 thunk 中间件中进行检查，并使其传递给我的 thunk 一个自定义getState函数，然后该函数将返回正确的状态切片。
  • 用它自己的密钥安装我的根减速器，并使我的 thunk 依赖于该密钥。

到目前为止，我认为最好的方法是创建我自己的自定义中间件，但我对其他应用程序现在将依赖我的中间件和自定义 thunk 类型这一事实并不满意。我认为必须有一个更通用的方法。

有什么想法/建议吗？您将如何解决此类问题？

4

1 回答 1

4

你有没有考虑过不依赖store.getState()？我会将动作与应用程序状态完全分离，并从调用动作的地方获取您需要的数据。

例如：

const someAction = function (someProp, anotherProp, currentId) {
    return dispatch => {

        if (someProp && !anotherProp) {
            dispatch(fetchSomething(currentId);
        } else {
            dispatch(doSomethingSynchronous());
        }
    };
}

这使得操作完全可重用，缺点是您现在必须在其他地方拥有该信息。还有哪里？如果方便的话，在你的组件内部使用this.context.store，或者通过propswith connect，或者更好的是，通过为你的特定应用程序设置包装器操作，所以：

const someApplicationAction = () => {
  return (dispatch, getState) => {
    const { foo, bar, baz } = getState();

    dispatch(someGenericAction(foo.someProp, bar.anotherProp, baz.currentID));
  };
}
于 2016-02-09T16:45:12.650 回答