ReactJS

Question

对于异步请求，我使用 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
    }
  }

我的actions.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,
  }
}

我的sagas.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),
])

在我的 reducer.js 中，我没有任何与恢复用户密码相关的东西，比如 RECOVER_USER_PASSWORD_SUCCESS 因为正如我所说， api 来自我的 saga 的响应只是一个没有信息的代码 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)

ReactJS - 获得分派结果的正确方法

ReactJS - Proper way to get a result of dispatch

javascript

redux-saga

react-redux