React-Redux：动作必须是普通对象。使用自定义中间件进行异步操作

Question

未处理的拒绝（错误）：操作必须是普通对象。使用自定义中间件进行异步操作。

我想在每个帖子中添加评论。因此，当运行获取帖子时，我想为所有帖子调用获取评论 API。

 export function bindComments(postId) {
  return API.fetchComments(postId).then(comments => {
    return {
      type: BIND_COMMENTS,
      comments,
      postId
    }
  })
}

原文由 Rajib Ahmed 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您必须在异步请求结束后进行调度。

这会起作用：

 export function bindComments(postId) {
    return function(dispatch) {
        return API.fetchComments(postId).then(comments => {
            // dispatch
            dispatch({
                type: BIND_COMMENTS,
                comments,
                postId
            });
        });
    };
}

原文由 sadiq 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于可能像我一样放弃简单细节的未来寻求者，在我的情况下，我只是忘记用括号调用我的动作函数。

动作.js：

 export function addNewComponent() {
  return {
    type: ADD_NEW_COMPONENT,
  };
}

我的组件.js：

 import React, { useEffect } from 'react';
import { addNewComponent } from '../../redux/actions';

  useEffect(() => {
    dispatch(refreshAllComponents); // <= Here was what I've missed.
  }, []);

我忘记使用 () 来发送动作函数。所以这样做解决了我的问题。

   useEffect(() => {
    dispatch(refreshAllComponents());
  }, []);

同样，这可能与 OP 的问题无关，但我希望我能帮助遇到与我相同问题的人。

原文由 Alex Jolig 发布，翻译遵循 CC BY-SA 4.0 许可协议