mapDispatchToPropsを使用しているときに約束が返ってこない

Question

最近、楽観的なアクションを1つ使用してから2つを追加して、成功/失敗のサーバー応答を検出するように移行しました。今、私は複数のアクションを派遣し、mapDispatchToPropsを使用していますというアクションはundefinedを返します

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

... 

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

：私はちょうど私の行動に約束からの簡単な方法とチェーンを通過することができました楽観的なアプローチで

。

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 } }; 
    } 
    } 
} 

Answer 1

あなたの構文mapDispatchToProps機能が正しくないようです。 メソッドを含むオブジェクトをプロパティとして返す必要があります。

はそのようなことを書いてみる：

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));   
     }); 
    } 
    } 
}