使用 mapDispatchToProps 时承诺不返回

问题描述

最近我已经从使用一个乐观操作过渡到添加另外两个来检测成功/失败服务器响应.

Recently I've transitioned from using one optimistic action to adding two more to detect success/failure server responses.

通过乐观的方法，我能够以速记方式和承诺链传递我的行动:

With the optimistic approach I was able to just pass in my action the shorthand way and chain from the promise:

class Post extends Component {
  onUpdateClick(props) {
    this.props.updatePost(this.props.params.id, props)
      .then(() => /* Action goes here */);
  }
}

...

export default connect(mapStateToProps, { updatePost })(Post);

现在我正在调度多个动作并使用 mapDispatchToProps 动作返回未定义.

Now that I'm dispatching multiple actions and using mapDispatchToProps the action returns undefined.

Uncaught (in promise) TypeError: Cannot read property 'then' of undefined

这是怎么回事?请注意，我使用的是 redux-promise.

What's going on here? Note that I'm using redux-promise.

function mapDispatchToProps(dispatch) {
  return {
    dispatch(updatePost(id, props))
      .then(result => {
        if (result.payload.response && result.payload.response.status !== 200) {
         dispatch(updatePostFailure(result.payload.response.data));
        } else {
         dispatch(updatePostSuccess(result.payload.data));
        }
      });
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Post);

export function updatePost(id, props) {
  const request = axios.put(`${ROOT_URL}/posts/${id}`, props);

  return {
    type: UPDATE_POST,
    payload: request,
  };
}

export function updatePostSuccess(activePost) {
  return {
    type: UPDATE_POST_SUCCESS,
    payload: activePost,
  };
}

export function updatePostFailure(error) {
  return {
    type: UPDATE_POST_FAILURE,
    payload: error,
  };
}

const initialState = { 
  activePost: { post: null, error: null, loading: false },
};

export default function(state = initialState, action) {
  let error;

  switch (action.type) {
    case UPDATE_POST: {
      return { ...state, activePost: { ...state.post, loading: true, error: null } };
    }

    case UPDATE_POST_SUCCESS: {
      return { ...state, activePost: { post: action.payload, loading: false, error: null } };
    }

    case UPDATE_POST_FAILURE: {
      error = action.payload || { message: action.payload.message };

      return { ...state, activePost: { ...state.activePost, loading: false, error: error } };
    }
  }
}

推荐答案

mapDispatchToProps 函数的语法似乎不正确.它必须返回一个包含方法作为属性的对象.

The syntax of you mapDispatchToProps function seems to be incorrect.It must returns an object containing methods as properties.

试着写出这样的东西:

function mapDispatchToProps(dispatch) {
  return {
    updatePost() {
      return dispatch(updatePost(id, props))
        .then(result => {
          if (result.payload.response && result.payload.response.status !== 200) {
           return dispatch(updatePostFailure(result.payload.response.data));
          }
          return dispatch(updatePostSuccess(result.payload.data));         
        });
    }
  }
}

这篇关于使用 mapDispatchToProps 时承诺不返回的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！