Programmers learn & share
0 votes
105 views

Problem :

Facing below error:

Unhandled Rejection (Error): Actions must be plain objects. Use custom middleware for async actions.

I wanted to add comments with all posts. So when fetch posts are run I want to call fetch comment API for every post.

export function bindAllComments(postAllId) {
  return API.fetchComments(postAllId).then(comments => {
    return {
      type: BIND_COMMENTS,
      comments,
      posAlltId
    }
  })
}

 

by (3.9k points)   | 105 views

2 Answers

0 votes

Solution :

I had also faced the similar issue in the recent past. I did lot of research on it and found the solution on it. This is the very common problem with the people getting started.

You must dispatch after async request ends.

This program would work:

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

 

OR

Make use of the Arrow functions it improves the readability of code. No need to return anything in the API.fetchComments, Api call is asynchronous when the request is completed then will get your response, there you have to just dispatch type and data.

Below code does the same job by making use of the Arrow functions.

export const bindAllComments = postAllId => {
  return dispatch => {
    API.fetchComments(postAllId).then(comments => {
      dispatch({
        type: BIND_COMMENTS,
        comments,
        postAllId
      });
    });
  };
};

 

by (36.1k points)  
0 votes

Solution:

You should dispatch after the async request ends.

Follow the below code:

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

 

You can't use fetch in actions without middleware.

Explanation:

Actions must be plain objects. You can use a middleware like redux-thunk or redux-saga to do fetch and then dispatch another action.

Follow the example of async action using redux-thunk middleware.

export function checkUserLoggedIn (authCode) {
 let url = `${loginUrl}validate?auth_code=${authCode}`;
  return dispatch => {
    return fetch(url,{
      method: 'GET',
      headers: {
        "Content-Type": "application/json"
      }
      }
    )
      .then((resp) => {
        let json = resp.json();
       if (resp.status >= 200 && resp.status < 300) {
          return json;
        } else {
          return json.then(Promise.reject.bind(Promise));
        }
      })
      .then(
        json => {
          if (json.result && (json.result.status === 'error')) {
            dispatch(errorOccurred(json.result));
            dispatch(logOut());
          }
          else{
            dispatch(verified(json.result));
          }
        }
      )
      .catch((error) => {
        dispatch(warningOccurred(error, url));
      })
  }
}

 

by (10k points)  
2,221 questions
2,696 answers
59 comments
241 users