ReactJS - правильный способ получить результат отправки

Question

Для асинхронных c запросов я использую redux-saga.

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

успех ниже возвращается:

payload: {email: "test@mail.com"}
type: "@user/RecoverUserPasswordRequest"
__proto__: Object

Мой компонент:

async function onSubmit(data) {
    const success = await dispatch(recoverUserPasswordRequestAction(data.email))
    if (success) {
      // do something
    }
  }

Мои действия. js

export function recoverUserPasswordRequest(email) {
  return {
    type: actions.RECOVER_USER_PASSWORD_REQUEST,
    payload: { email },
  }
}

export function recoverUserPasswordSuccess(email) {
  return {
    type: actions.RECOVER_USER_PASSWORD_SUCCESS,
    payload: { email },
  }
}

export function recoverUserPasswordFailure() {
  return {
    type: actions.RECOVER_USER_PASSWORD_FAILURE,
  }
}

Мои саги. js

export function* recoverUserPassword({ payload }) {
  const { email } = payload

  try {
    const response = yield call(api.patch, 'user/forgot-password', {
      email
    })

    // response here if success is only a code 204
    console.log('response', response)

    yield put(recoverUserPasswordSuccess(email))

  } catch (err) {
    toast.error('User doesnt exists');
    yield put(recoverUserPasswordFailure())
  }
}

export default all([
  takeLatest(RECOVER_USER_PASSWORD_REQUEST, recoverUserPassword),
])

В моем редукторе. js У меня нет ничего связанного с восстановлением пароля пользователя, например RECOVER_USER_PASSWORD_SUCCESS, потому что, как я уже сказал, ответ API от моей саги - это всего лишь код 204 без информации

Answer 1

Это должно рассматриваться как изменение состояния в вашем приложении.

Добавьте редуктор, который получает эти действия RECOVER_USER_PASSWORD_SUCCESS или RECOVER_USER_PASSWORD_FAILURE, затем обновите хранилище информацией о состоянии запроса. Например:

const initialState = {
   email: null,
   status: null,
}

const recoverPasswordReducer = (state=initialState, action) => {
    //...
    if (action.type === actions.RECOVER_USER_PASSWORD_SUCCESS) {
        return {...initialState, status: True }
    }
    if (action.type === actions.RECOVER_USER_PASSWORD_SUCCESS) {
        return {...initialState, status: False }
    }
    return state;
}

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

function mapStateToProps(state) {
   return {
       /* ... other fields needed from state */
       status: state.status
   }
}

export connect(mapStateToProps)(ComponentNeedsToKnow)