Question

我必须在已经进步的Web应用程序中解决两个问题：

离线显示数据列表
在所述列表的项目上上传图像（作为附件）

我将照常调用后端，但是在发生故障事件时，我将读取/写入indexedDB。 问题是将这样的逻辑放在react / redux / axios应用程序中的什么位置？

我们有一个React应用程序，到目前为止-使用redux和axios中间件与后端进行通信。一些例子：

动作：

export function listTaskManagementTags() {
    return {
        type: actionTypes.LIST_TASK_MANAGEMENT_TAGS,
        payload: {
            client: 'graphql',
            request: {
                method: 'post',
                data: {
                    query: `
                            query{
                                 listTaskManagementTags {
                                   businessId
                                   label
                                 }
                                }
                           `
                }
            }
        }
    };
}

如果http调用成功返回，则此操作最终将生成LIST_TASK_MANAGEMENT_TAGS Redux事件，然后生成LIST_TASK_MANAGEMENT_TAGS_SUCCESS，否则将生成LIST_TASK_MANAGEMENT_TAGS_FAIL。

因此，在减速器中，我将其管理为：

case actionTypes.LIST_TASK_MANAGEMENT_TAGS_SUCCESS: {
            const newState = _.cloneDeep(state);
            newState.taskListConfiguration = mapTaskListConfiguration(action.payload.data.data.listTaskManagementTags);
            return newState;
        }

现在，根据新要求，我将创建和管理IndexedDB，并且-可以说-每次成功都在其中写入上述列表，并在每次失败时从中读取列表。（当然，整个shenanigan要复杂得多，但这就是要害）。

现在我有一个大问题：将写入/保存逻辑放在哪里？

将其放入reducer会很方便，但是在redux世界中，放置一个可能具有各种副作用的异步逻辑是一个很大的禁忌。同样，只有在成功写入数据库时，它才真正成功，因为从用户的角度来看，该操作确实是异步的，但读取操作并非如此。
我可以将其放在这样的动作中：

export function fetchOrReadFromDB() {
    return dispatch => {
        return dispatch(fetchMyList())
            .then(response => {
                return dispatch(fetchMyListSuccess());
            })
            .catch(error => {
                return dispatch(readFromIndexDB());
            });
    };
}

但是，该解决方案有点使我的“干净” axios中间件解决方案针对每个此类请求（我不再能够将处理成功和失败的样板留给中间件，而必须像使用它之前一样自己实现）

我可以尝试为我的“获取后端，但离线时读取indexedDB”方案实现新的中间件-谷歌搜索30分钟后仍未找到任何中间件。但是我有一种感觉，数据库的使用场景将因用例而异，而“通用”中间件将无法使用。

对此事有任何帮助，深表感谢！

使用带有indexedDB的redux / axios设置作为备份的“正确方法”是什么

0 个答案: