时间戳

首页 > 解决方案 > 动作必须是普通对象。使用自定义中间件进行异步操作 errorfor dispatching actions

redux - 动作必须是普通对象。使用自定义中间件进行异步操作 errorfor dispatching actions

问题描述

我是 redux 的新手 我正在显示帖子 我不明白发生了什么 我读了几篇帖子但无法解决错误

但是后来我得到了错误

错误：操作必须是普通对象。使用自定义中间件进行异步操作。

以下是动作减速器和存储代码，请让我知道我哪里出错了

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

减速器.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 和 applymiddleware 时，错误消失了

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

标签： reduxreact-redux

解决方案

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 是个好主意，我假设你正在使用 redux thunk。下面是与您的问题相关的一些链接：

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

我希望它有帮助

推荐阅读