Redux: ожидание изменений состояния, прежде чем делать что-то еще

Question

В гипотетическом приложении пользователь может создать книгу, и по умолчанию эта книга имеет 3 страницы. Как только книга и страницы добавлены, я хочу сделать некоторые другие вещи с книгой и страницами. Книги и страницы - это два отдельных редуктора в моем магазине редуксов, а также две таблицы в моей базе данных. Мой текущий поток таков:

1. Пользователь создает новую книгу.
2. ADD_BOOK_REQUEST действие называется
3. ADD_PAGES_REQUEST действие называется
4. Книга добавлена ​​в базу данных, которая запускает ADD_BOOK_SUCCESS
5. Страницы добавляются в базу данных, которая запускает ADD_PAGES_SUCCESS

Как упомянуто выше, после выполнения шагов 4 и 5 я хотел бы сделать некоторые другие вещи с книгой, но я не уверен, что лучший подход для этого. Просто чтобы запустить его сейчас, в настоящее время у меня есть функция setTimeout, которая выполняет проверку новой книги и 3 страниц с этим bookId. Если книга и 3 страницы находятся в магазине, выполните другие действия, если нет, снова запустите тайм-аут. Я уверен, что это не лучший способ сделать это. : Улыбка:

Answer 1

У вас есть несколько вариантов.

1) В вашем React Component вы можете подключиться к состоянию, которое обновляется вашим редуктором при ADD_PAGES_SUCCESS. В componentWillReceiveProps вы можете проверить этот подключенный элемент состояния и отправить действие, которое вы хотите выполнить после шага (5), из своего компонента.

... не очень хорошо, потому что componentWillReceiveProps может быстро стать волосатым, и по возможности его следует избегать.

2) Используйте redux-thunk или redux-saga:

С помощью Redux-saga в ваших обработчиках ACTION (sagas) вы можете take ACTIONS и выполнять такие вещи, как условно совершать вызовы API и yield (ждать) ответа сервера, после чего вы можете вызвать (put) больше ДЕЙСТВИЙ или делать больше вызовов API или делать что-либо еще, что вы хотите. Это не заменит ваши редукторы и не изменит ваше состояние притока.

Пример:

// worker Saga: will be fired on ADD_PAGES_SUCCESS actions

function* doStuffAfterAddPages(action) {
  while (true) {
    yield take(ADD_PAGES_SUCCESS);

    try {
      let moreData;
      const result = yield call(api.doSomethingElse);

      if (result.isExpected) {
        moreData = yield call(api.doOtherStuff);
      } else {
        moreData = yield call(api.doOtherStuff);
      }

      yield put(OTHER_STUFF_COMPLETE, { data: moreData });
    } catch (error) {
      yield put(OTHER_STUFF_FAILED, { error: error.message);
    }
  }
}

Answer 2

Гоша Аринич описывает одно из возможных решений в своем посте Обнаружение изменений состояния с помощью Redux-Saga .

В этом посте он предлагает написать функцию waitFor, которая будет возвращаться, когда предоставленный селектор наконец вернет true:

function* waitFor(selector) {
  if (yield select(selector)) return; // (1)

  while (true) {
    yield take('*'); // (1a)
    if (yield select(selector)) return; // (1b)
  }
}

Можно использовать так:

function* someSaga() {
  yield call(waitFor, state => getCurrentUser(state) != null);
  // the user is logged in by now
}

Другим возможным решением будет более простое пользовательское промежуточное ПО, которое выполняет эту проверку после отправки действий.