Блог

Главная - Вопросы по программированию - Вопрос относительно React-Redux и Thunks

Вопрос относительно React-Redux и Thunks

#reactjs #react-redux #redux-thunk

#reactjs #react-redux #redux-thunk

Вопрос:

Я пытаюсь найти наилучший подход к отправке двух действий в рамках одной и той же функции thunk, но рисую пробел (вероятно, потому, что я смотрел на него пару часов)…

Итак, в моем redux/thunks/auth.js файле у меня есть две функции: одна для входа пользователя и одна для получения информации о пользователе. Я хотел бы вызвать attemptLogin и внутри этого после успешного входа в систему вызвать attemptGetUser для загрузки информации пользователя сразу после входа в систему.

Есть идеи о том, как я могу подойти к этому?

redux/thunks/auth.js

 export const attemptGetUser = () => async (dispatch) => {
  await getUser().then((res) => {
    dispatch(setUser(res.data));
  });
};

export const attemptLogin = (formData) => async (dispatch) => {
  await postLogin(formData)
    .then((res) => {
      dispatch(login(res.data));
    })
    .then(() => {
      dispatch(attemptGetUser());
    });
};

redux/actions/auth.js

 export const login = (user) => ({
  type: LOGIN_SUCCESS,
  payload: user,
});

export const setUser = (user) => ({
  type: USER_LOADED,
  payload: user,
});

Комментарии:

1. Я думаю, вы можете выполнить другое действие, которое последовательно отправляет эти два действия thunk и ожидает каждого, а затем отправляет это действие

2. Есть идеи по синтаксису для этого?

3. В вашем действии, вероятно, это будет что-то вроде await dispatch(attemptLogin(formData)); , за которым следует, await dispatch(attemptGetUser()); однако вам может потребоваться выполнить a return dispatch в ваших thunks (в части then), чтобы гарантировать, что обещания связаны

4. Я обновил свой OP с помощью кода, который у меня теперь есть, который, похоже, отлично работает. Спасибо!