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

Question

我有一个关于如何为不是 React 组件的文件提供 redux 存储的 JS 设计问题。我有一个典型的 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 store。我可以向 fetches.js 中的所有方法添加一个“store”参数，但我认为会有更好的 JS 设计模式。也许在 App.js 或其他东西中初始化一个类，类似于 react-redux 如何使用 Provider 和“连接”为所有子组件提供商店。我是 JS 的新手，所以我想知道有经验的 JS 开发人员会如何解决这个问题。

Answer 1

此设计缺少处理 promise 的中间件。

基本思想是，当您分派(dispatch)一个 Promise 时，从您“调用”这些“获取”函数的代码中，会有一个中间件来执行分派(dispatch)的操作并分派(dispatch)其他操作，例如“开始获取”和 'fetching ended' 来标记异步流。

redux 官方网站上的这个链接是一个好的开始 - https://redux.js.org/advanced/asyncflow

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