Реагировать Redux ждать изменения состояния - PullRequest
Новая
       6

Реагировать Redux ждать изменения состояния

0 голосов
/ 11 октября 2018

Я хочу извлечь все мои функции вызова сервера (HTTP GET, POST, ...) в одну вспомогательную функцию.Вспомогательная функция будет вызываться из разных реагирующих компонентов.Он проверит, истек ли срок действия токена JWT (на стороне клиента), и, если срок действия истек, попросит пользователя повторно войти в систему и получить новый токен перед отправкой запроса на сервер.

Проблема: Когда вспомогательная функция узнает, что токен истек, она отправит действие, чтобы показать диалог входа в систему, однако продолжит код, вызывающий выборку.Мне нужно подождать, пока диалоговое окно входа не изменит состояние LoggedIn и токен, прежде чем вызывать сервер, однако, кажется, невозможно наблюдать за этим изменением состояния.(Одна идея - вернуть обещание из диалога входа в систему, однако я не могу понять, как вернуть обещание и откуда!)

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

Пример кода

* PS: если песочница с кодом не работает, обновите ее.Похоже, что у них есть проблемы с расами с некоторыми плагинами!

Ответы [ 2 ]

0 голосов
/ 11 октября 2018

Я еще не специалист по thunk, но я могу сказать, что ваша функция serverCall должна возвращать функцию с параметром отправки ( см. Примеры здесь)

Вы должны отправитьдействие в этой подфункции (на самом деле, вызовите создателя действия, который переведет данные в состояние приложения.

Вам не нужно давать явное обещание, потому что fetch возвращает обещание.

Я попробую что-то вроде: 

export const serverCall = (
  url,
  method,
  body = undefined,
  successMessage = undefined
) => {

  // your code 
  return function (dispatch) {

    return fetch(url, {
      method: method,
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      },
      ...(body && { body: JSON.stringify(body) })
    }).then(response => response.JSON())
      .then(response => 
     if (response.ok) {
        if (successMessage) {
          console.log(successMessage);
        }
        dispatch(fetchData(response))
      } else {

index.js 

    <Button
      onClick={() =>
        this.props.serverCall(
          "https://jsonplaceholder.typicode.com/users",
          "GET"
        )
    >

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

const mapDispatchToProps = dispatch => ({
  onLogin: (username, password) => dispatch(login(username, password)),
  ToggleIsLoginDialogOpen: IsLoginDialogOpen =>
    dispatch(toggleIsLoginDialogOpen(IsLoginDialogOpen)),
  serverCall: (url, method) => dispatch(serverCall(url, method))
});
0 голосов
/ 11 октября 2018

Это то, что вы ищете? 

componentDidUpdate(prevProps) {
  if (!prevProps.loggedIn && this.props.loggedIn) {
    // User just logged in
  }
}
...