Question

我在这里是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);

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

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

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

我希望对您有帮助

动作必须是普通对象。将自定义中间件用于异步操作错误，以分派操作

1 个答案: