mapDispatchToProps、调度和axios

Question

好的，所以我有下面的代码，我只是需要一些指导，因为我觉得这是有点错误或可以重构。这一切都正常，但是对于在register.js中进行调度和在action.js中进行返回调度有一些关注。在我看来，如果看起来像registerUser中的actions.js正在被分派，但我不认为我需要这样做，那么调度应该只在捕获范围内执行。

任何建议都是很棒的(也需要这段代码是可测试的)

register.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));

actions.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；有关更多信息，请参见这。

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

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. 注册成功

希望能帮上忙。