Actions must be plain objects. Use custom middleware for async actions errorfor dispatching actions

Question

I'm new to redux here I'm displaying post I'm not understanding whats is going on I read few posts but can't resolve the error

But then I get the error as

Error: Actions must be plain objects. Use custom middleware for async actions.

Following is action reducer and store code please lemme know where I'm going wrong

actionPost.js

            import {FETCH_POST} from '../constants/action-types';
            import Axios from 'axios';

            export const fetchPost=(post)=>{
                return{
                    type:FETCH_POST,
                    payload:post
                }
            }


            export const fetchAllPost=()=>{
                return (dispatch)=>{
                    return Axios.get("https://jsonplaceholder.typicode.com/photos")
                    .then(response=>{
                        dispatch(fetchPost(response.data))
                    })
                    .catch(error=>{
                        throw(error)
                    });
                };

            }

Post.js

                import React, { Component } from 'react';
            import { fetchAllPost } from './Redux/actions/actionPost';
            import {connect} from 'react-redux';
            import {withRouter} from 'react-router-dom';

            const mapDispatchToProps=dispatch=>{
                return{
                    fetchAllPost:()=>dispatch(fetchAllPost())
                }
            }

            class NewPostC extends Component{
                componentDidMount(){
                    this.props.fetchAllPost(); **// is this correct?**
                }
                render(){
                    return(
                        <div>
                              //display post here


                        </div>
                    )
                }

            }

            const dispPost=connect(null,mapDispatchToProps)(NewPostC);
            export default withRouter(dispPost);

Reducers.js

                    import {  LOG_IN,FETCH_POST } from '../constants/action-types';

                const initialState={
                    userDetails:''

                };

                const rootReducers=(state=initialState,action)=>{
                    switch(action.type){
                    case LOG_IN:
                                console.log("apayload",action.payload)
                                return state;
                    case FETCH_POST:
                                return action.posts;
                    default:
                                return state;
                    }
                };

                export default rootReducers;

store.js

                    import { createStore } from "redux";

                import  rootReducers  from "../reducers/Loginreducers";


                const store=createStore(rootReducers);
                export default store;

Can anyone please help me as I'm stuck since 2 days I wanna understand whats happening and where I'm going.

Please lemme know where I'm going wrong.

Updated code only the changes I made in those files

dispPost.js

const mapDispatchToProps=()=>{
                return{
                    fetchAllPost   ////////////**A**
                }
            }

            const mapStateToProps=state=>{
                console.log("state",state)
                return{
                    posts:state
                }
            }

            //code here

             const NewPost=connect(mapStateToProps,mapDispatchToProps)(NewPostC);

reducers

            case FETCH_POST:
                                console.log("apayload---",action.posts)
                                return action.posts;

store.js ] When I added the thunk and applymiddleware the error vanished

                import  rootReducers  from "../reducers/Loginreducers";
                import { fetchAllPost } from "../actions/actionNewPost";
                import { createStore , applyMiddleware } from "redux";
                import thunk from "redux-thunk";

                const store=createStore(rootReducers,applyMiddleware(thunk)); **B**//
                store.dispatch(fetchAllPost());  //**C**
                export default store;

Can anyone please explain how A ,B, C work Its seems to me some magic Please lemme know

New Updated

store.js

          import  rootReducers  from "../reducers/Loginreducers";                    
                import { createStore , applyMiddleware } from "redux";
                import thunk from "redux-thunk";

                const store=createStore(rootReducers,applyMiddleware(thunk));
                export default store;

disppost.js

            const mapDispatchToProps=dispatch=>{
                return{
                   //just fetchAllPost doesnt work if its not dispatch at store or here
                    fetchAllPost:()=>dispatch(fetchAllPost())
                }
            }

Leonardo Lobato Leonardo Lobato · Accepted Answer · 2018-12-26T15:29:30

Post.js

        import React, { Component } from 'react';
        import { fetchAllPost } from './Redux/actions/actionPost';
        import {connect} from 'react-redux';
        import {withRouter} from 'react-router-dom';

        const mapDispatchToProps=dispatch=>{
            return{
                fetchAllPost // **remove the function declaration, you already did it **
            }
        }

        class NewPostC extends Component{
            componentDidMount(){
                this.props.fetchAllPost();
            }
            render(){
                return(
                    <div>
                          //display post here


                    </div>
                )
            }

        }

        const dispPost=connect(null,mapDispatchToProps)(NewPostC);
        export default withRouter(dispPost);

I would say that would be a good idea to check your store.js, I'm assuming you're using redux thunk. Below some links related to your issue:

https://github.com/reduxjs/redux-thunk/issues/166 https://github.com/reduxjs/redux-thunk/issues/146

I hope it helps

Actions must be plain objects. Use custom middleware for async actions errorfor dispatching actions

1 Answers