Действия должны быть простыми объектами.Использовать пользовательское промежуточное ПО для асинхронных действий. Ошибка для диспетчерских действий.

Question

Я новичок в редуксе, здесь я показываю пост, я не понимаю, что происходит, я прочитал несколько постов, но не могу устранить ошибку

Но тогда я получаю ошибку как

Ошибка: действия должны быть простыми объектами.Используйте пользовательское промежуточное ПО для асинхронных действий.

Ниже приведен редуктор действий и код хранилища, пожалуйста, дайте мне знать, где я ошибаюсь

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;

Может кто-нибудь помочь мне, поскольку я застрял 2 дня назадхочу понять, что происходит и куда я иду.

Пожалуйста, позвольте мне знать, где я иду не так.

Обновлен код только те изменения, которые я внес в эти файлы

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

редукторы

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

store.js] Когда я добавил thunk и применил программное обеспечение, ошибка исчезла

                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;

Может кто-нибудь, пожалуйста, объясните, как A, B, C работает. Это кажется мне волшебством. Пожалуйста, дайте мне знать

Новое Обновление

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

Answer 1

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

Я бы сказал, что было бы неплохо проверить ваш store.js, я предполагаю, что вы используете избыточный thunk.Ниже приведены ссылки, связанные с вашей проблемой:

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

Надеюсь, это поможет