最近,我已经从使用一种乐观操作过渡到添加另外两种来检测服务器响应的成功/失败。
使用乐观的方法,我能够以速记方式和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
该动作返回未定义。
Uncaught (in promise) TypeError: Cannot read property 'then' of undefined
这里发生了什么?请注意,我正在使用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 } };
}
}
}