React Saga - предотвращение обновления магазина до разрешения обещания - PullRequest
Новая
       25

React Saga - предотвращение обновления магазина до разрешения обещания

1 голос
/ 16 апреля 2019

Привет! У меня проблема с redux / saga / promises - Не совсем уверен, где проблема: 

//USER SERVICE
function login(username, password) {
  const requestOptions = {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body:
      "username=" + username + "&password=" + password + "&grant_type=password"
  };

  return fetch(`${Config.apiUrl}/Token`, requestOptions)
    .then(handleLoginResponse)
    .then(user => {
      // login successful if there's a jwt token in the response
      if (user.access_token) {
        // store user details and jwt token in local storage to keep user logged in between page refreshes
        localStorage.setItem("user", JSON.stringify(user));
      }

      return user;
    })
    .catch(error => {
      return { error };
    });
}

//AUTH SAGA
export function* login(action) {
  const { username, password } = action.payload;
  const response = userService.login(username, password);
  console.log(response);
  if (response.error) {
    yield put({ type: actions.LOGIN_FAILURE, payload: response.error });
  } else {
    yield put(actions.loginUserSuccessful());
    yield delay(1000);
    // yield history.push("/");
  }
}

//AUTH ACTIONS
export function loginUserSuccessful() {
  return { type: LOGIN_SUCCESS };
}

//AUTH REDUCER
export function authentication(state = initialState, action) {
  const { payload } = action;

  switch (action.type) {
    case actions.LOGIN_SUCCESS:
      return {
        loggedIn: true,
        user: action.user
      };
    case actions.LOGIN_FAILURE:
      return state;
    case actions.USERS_LOGOUT:
      return state;
    case actions.LOGIN_TOGGLE_MODAL:
      const { isLoginModalOpen } = payload;
      return {
        ...state,
        isLoginModalOpen
      };
    default:
      return state;
  }
}

У меня есть пункт меню входа, который при входе пользователя (как указано в«user» и «loggedIn», заполняемые в магазине), будут переключаться с помощью пункта меню «member».Форма входа является частью компонента заголовка.

Поэтому, когда я вхожу в систему, вызывается бэкэнд, устанавливается токен (USER SERVICE), это происходит через сагу (AUTH SAGA).И когда пользователь вошел в систему, вызывается действие «loginUserSuccessful» (LOGIN ACTION).Это вызовет редуктор, который обновляет состояние с пользователем и "loggedIn" (AUTH REDUCER)

Проблема в в том, что для loggedIn задано значение true, а состояние обновляетсяДО того, как объект "пользователь" установлен.Поэтому, когда обещание, наконец, разрешается, пользователь устанавливается, но заголовок не обновляется.Так что это только получает новое состояние, когда я перезагружаю страницу.

Я заметил, что по какой-то причине, когда действие вызывается из саги, я могу вытащить «пользователя» из действия, даже если я неt установить его вручную, когда я вызываю loginUserSuccessful - я получил это из учебника, поэтому я не совсем уверен, как это работает - я все еще новичок.

Я уверен, что делаю что-то не так.Но, может быть, кто-то может помочь?Дайте мне знать, нужна дополнительная информация.

1 Ответ

1 голос
/ 20 апреля 2019

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

...