Question

我有一个“我的个人资料”表单，其中显示了用户的详细信息。

Api调用以获取用户数据如下。

componentDidMount() {
    this.props.getUserDetails();
  }

佐贺文件如下

function* fetchUserDetails() {
  try {
    const response = yield call(userDetailsApi);
    const user = response.data.user;

    // dispatch a success action to the store
    yield put({ type: types.USER_DETAILS_SUCCESS, user});

  } catch (error) {
    // dispatch a failure action to the store with the error
    yield put({ type: types.USER_DETAILS_FAILURE, error });
  }
}

export function* watchUserFetchRequest() {
  yield takeLatest(types.USER_DETAILS_REQUEST, fetchUserDetails);
}

减速器如下

export default function reducer(state = {}, action = {}) {
  switch (action.type) {
    case types.USER_DETAILS_SUCCESS:
      return {
        ...state,
        user: action.user,
        loading: false
      };
    default:
      return state;
  }
}

现在我需要将用户详细信息设置为状态，以便在更改表单值时，可以调用handleChange函数来更新状态。

如果我使用过redux thunk，我可能会使用如下内容

componentDidMount() {
    this.props.getUserDetails().then(() => {
      this.setState({ user });
    });

}

以便用户状态包含用户的所有详细信息，并且如果用户属性发生更改，则可以使用handleChange方法更新状态。

也就是说， api调用后，我需要的是类似

state  = {
   email: user@company.com,
   name: 'Ken'
}

如何使用redux saga实现相同目的？

在成功调用api之后将用户详细信息设置为状态-Redux传奇

0 个答案: