Что такое «правильный способ» использовать установку redux / axios с indexedDB в качестве резервной копии - PullRequest
Новая
       12

Что такое «правильный способ» использовать установку redux / axios с indexedDB в качестве резервной копии

0 голосов
/ 15 апреля 2019

Мне нужно решить две проблемы в моем уже прогрессивном веб-приложении:

  • Показать список данных в автономном режиме
  • Загрузка изображений - в виде вложений - в пункты указанного списка

Я собираюсь вызвать бэкэнд как обычно, но в случае сбоя я собираюсь прочитать / записать indexedDB. Вопрос в том, где разместить такую ​​логику в приложении «Реакция / Избыточность / Аксиос»?

У нас есть приложение реагирования и - до сих пор - использующее Redux с промежуточным ПО Axios для связи с бэкэндом. Некоторые примеры:

Действие: 

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

В результате этого действия будет генерироваться событие редуктора LIST_TASK_MANAGEMENT_TAGS, а затем LIST_TASK_MANAGEMENT_TAGS_SUCCESS, если вызов http успешно завершится, а в противном случае 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 и, скажем, писать в нем вышеупомянутый список при каждом успехе и читать список при каждом сбое. (Конечно, весь «Шенаниган» намного сложнее, но в этом его суть).

Теперь у меня большой вопрос: Куда поместить эту логику записи / сохранения?

  • Было бы удобно поместить его в редуктор, однако использование асинхронной логики, которая может иметь всевозможные побочные эффекты, является большим запретом в мире редуксов. Кроме того, это действительно работает только в случае успеха, когда я пишу в БД, поскольку эта операция действительно асинхронна с точки зрения пользователя, но чтение не является.
  • Я мог бы поместить это в действие как: 
export function fetchOrReadFromDB() {
    return dispatch => {
        return dispatch(fetchMyList())
            .then(response => {
                return dispatch(fetchMyListSuccess());
            })
            .catch(error => {
                return dispatch(readFromIndexDB());
            });
    };
}

Однако это решение как бы заставляет мое «чистое» решение промежуточного программного обеспечения axios спорить при каждом таком запросе (я больше не могу оставлять образец успешной и неудачной обработки промежуточного программного обеспечения, но вынужден сам внедрить его, как и до его использования)

  • Я мог бы попытаться внедрить новое промежуточное программное обеспечение - я не нашел ни одного после 30-минутного поиска в Google - для моего сценария «Извлечь бэкэнд, но прочитать indexedDB при отключении». Однако у меня есть ощущение, что сценарии использования БД будут весьма специфичными от варианта использования к варианту использования, и «общее» промежуточное ПО просто не подойдет.

Любая помощь по этому вопросу высоко ценится!

...