javascript - mapDispatchToProps、dispatch 和 axios

Question

好的，所以我有以下代码，我只需要一些指导，因为我觉得这有点不对劲或可以重构。一切正常，但对在 register.js 中进行调度和在 action.js 中进行返回调度有一些担忧。对我来说，如果 actions.js 中的 registerUser 看起来正在被分派(dispatch)，但我认为我不需要，分派(dispatch)应该只在 catch 中执行。

任何建议都很好(还需要此代码可测试)

注册.js

const mapStateToProps = state => ({
  auth: state.auth,
  errors: state.errors
});

const mapDispatchToProps = dispatch => ({
  registerUser: (userData, history) => dispatch(registerUser(userData, history))
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withRouter(Register));

Action .js

export const registerUser = (userData, history) => {
  return dispatch => {
    return axios
      .post('/api/users/register', userData)
      .then(res => history.push('/register-complete'))
      .catch(err =>
        dispatch({
          type: GET_ERRORS,
          payload: err.response.data
        })
      );
  };
};

Answer 1

我个人会这样做:

在register.js中

import { regiserUser } from "./actions";

const mapStateToProps = state => ({
    auth: state.auth,
    errors: state.errors
});

export default connect(
    mapStateToProps,
    { registerUser: registerUser }
)(withRouter(Register));

我认为这样语法更简洁，而且没有dispatch；见this获取更多信息。

在 actions.js 中，使用 async/await 语法(更多信息 here)

return async dispatch => {
    dispatch({
        type: USER_REGISTRATION_STARTED
    });

    try {
        await axios.post('/api/users/register', userData);

        history.push('/register-complete')

        dispatch({
            type: USER_REGISTRATION_SUCCESS
        });
    } catch (e) {
        dispatch({
            type: USER_REGISTRATION_ERROR,
            payload: {
                error: e
            }
        });
    }
};

通过调度 USER_REGISTRATION_STARTED 操作，您还可以向用户显示正在发生某些事情的反馈(就像加载微调器一样)；此外，我认为这种方式更有条理。

1. 报名开始
2. 注册错误
3. 注册成功

希望对您有所帮助。