Question

我有一个JS设计问题，关于如何为不响应组件的文件提供redux存储。我有一个典型的react-redux应用程序。目前，我没有在我的react组件中直接调用fetch，而是在一个集中的简单功能实用工具方法文件fetches.js中进行所有服务调用。

const mainFetch(uri, onSuccess, options) {
    fetch(uri, options).then(response => {
        onSuccess(response);
    });
}

const export fetchDogs = (onSuccess) => {
    mainFetch('/dogs', onSuccess, { method: 'GET' });
}

const export fetchCats = (onSuccess) => {
    mainFetch('/cats', onSuccess, { method: 'GET' });
}

我意识到，准确地知道我们当前正在等待哪些请求对于我的应用程序很有用。因此，我正在考虑将此信息添加到我的redux状态，以便可以将mainFetch更新为类似以下内容：

const mainFetch(uri, onSuccess, options, requestId) {
    store.dispatch({type: 'STARTED_REQUEST', request: requestId);

    fetch(uri, options).then(response => {
        store.dispatch({type: 'FINISHED_REQUEST', request: requestId);
        onSuccess(response);
    });
}

但是有一个问题，fetches.js无法访问redux存储。我可以在fetches.js中的所有方法中添加一个“存储”参数，但是我认为会有更好的JS设计模式。可能是在App.js或诸如此类中初始化一个类，类似于react-redux如何使用Provider和“ connect”为所有子组件提供存储。我是JS的新手，所以我想知道经验丰富的JS开发人员如何解决此问题。

Answer 1

此设计缺少可兑现承诺的中间件。

基本思想是，当您从“调用”这些“提取”功能的代码中调度一个Promise时，将会有一个中间件来执行调度的操作并调度其他操作，例如“开始提取”和“提取结束”来标记异步流。

一个好的起点是redux官方网站上的此链接-https://redux.js.org/advanced/asyncflow

中间件-https://github.com/pburtchaell/redux-promise-middleware

为实用程序方法提供Redux存储

1 个答案: