Redux асинхронные вызовы API - самое последнее состояние

Question

В настоящее время я работаю в австрийской компании, мы разрабатываем систему управления документами для Windows. В начале 2017 года мы начали создавать веб-приложение с использованием Angular. Однако у нас начались проблемы с состоянием приложения.

Мы думаем об использовании Redux в качестве менеджера состояний, но у нас есть одна проблема.

Допустим, у нас есть таблица с 2 документами

|--------------------------------|
| Document1.pdf                  |
|--------------------------------|
| Document2.pdf                  |
|--------------------------------|

У нас также есть предварительный просмотр выбранного документа.

Скажем, мы нажимаем на Doc 1 (серверу требуется 5 секунд, чтобы загрузить документ). Через 1 секунду после нажатия на Doc1 мы нажимаем на Doc2 (серверу для загрузки документа требуется всего 1 секунда). Через секунду Doc2 появляется в предварительном просмотре, однако через 4 секунды более поздний Doc1 загружается и появляется в предварительном просмотре. Хотя в настоящее время мы выбрали Doc2.

При использовании Redux мы должны вручную проверять наличие "правильного" документа или фреймворк все для нас, и мы просто должны реализовывать серверные вызовы, не думая о состоянии приложения?

Answer 1

Redux - это контейнер с предсказуемым состоянием для приложений JavaScript.

Вот как начинаются документы Redux. Redux не управляет вашим государством. Это только сохраняет это и обеспечивает детерминированные мутации. Он учит некоторые очень хорошие практики, и на самом деле это действительно умный кусок программного обеспечения. Тем не менее, это не может решить вашу проблему без небольшой помощи с вашей стороны. Redux не об управлении государством. Речь идет об управлении процессами, которые ведут к управлению вашим состоянием.

Я бы решил вашу проблему, используя маркер того, что пользователь нажал в последнее время. Например:

action                 | state
--------------------------------
clicking on Doc1       | state = { itemSelected: 'Doc1', data: null }
clicking on Doc2       | state = { itemSelected: 'Doc2', data: null }

Затем, когда приходит ответ, нам нужна полезная нагрузка в виде

{ itemToLoad: 'Doc1', data: {...} }

А в остальном все просто, мы просто проверяем, itemToLoad равно itemSelected, Если да, то мы обновляем данные.

if (payload.itemToLoad === currentState.itemSelected) {
  return {
    itemSelected: currentState.itemSelected,
    data: payload.data
  }
} else {
  // if not equal we just ignore it and return the current state
  return currentState;
}