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

Question

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

Answer 1

这种设计缺乏一个中间件来处理 promise 。

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

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

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