javascript-如何使thunk独立于状态形状而使其可移植？

我使用React和Redux开发了一个较小的独立Web应用程序,该应用程序托管在其自己的Web服务器上.现在,我们想将该应用程序的大部分重用/集成到另一个React / Redux Web应用程序中.

从理论上讲,这应该很好用,因为我所有的React组件,reduce和大多数动作创建者都是纯净的.但是我有一些动作创建者会返回依赖于应用程序状态的重击.他们可以调度异步或同步操作,但这不是这里的问题.

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

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

这显然破坏了我的动作创建者的工作,这些创造者返回笨拙的东西并需要读取应用程序状态,因为现在所有内容都包含在“ myApp”状态切片中.

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

到目前为止,我想到了一些技巧/想法：

>创建自己的thunk类型,以便我可以在自定义thunk中间件中进行instanceof检查,并使它通过我的thunk一个自定义的getState函数,该函数将返回正确的状态片.
>用它自己的密钥挂载我的root减速器,并使我的thunk依赖于该密钥.

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

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

解决方法:

您是否考虑过不依赖store.getState()？我会将动作与应用程序状态完全脱钩,并从调用动作的地方获取所需的数据.

因此,例如：

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

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

这使得这些操作完全可以重用,而您的缺点是现在必须在其他位置获得该信息.还有什么地方？如果方便的话,可以使用this.context.store在组件内部,或者通过带有connect的props,或者通过对特定应用程序进行包装操作,可能更好：

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

    dispatch(someGenericAction(foo.someProp, bar.anotherProp, baz.currentID));
  };
}

标签：redux,redux-thunk,javascript
来源： https://codeday.me/bug/20191119/2033199.html