Why am i getting "Error: Actions must be plain objects. Use custom middleware for async actions." error?

Question

我不断收到“操作必须是普通对象。使用自定义中间件进行异步操作。”错误，我完全被困在这里。我在这里做错了什么请帮我弄清楚并帮助我摆脱这个错误。

这是我的 index.js 文件，我在其中将 redux 商店集成到应用程序中。

import "babel-polyfill";
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import { Provider } from 'react-redux'
import { composeWithDevTools } from 'redux-devtools-extension';
import { createStore, applyMiddleware, combineReducers, compose} from 'redux'
import createSagaMiddleware from 'redux-saga'
import rootSaga from './sagas'
import { postsReducer } from './reducers/posts'
import Routes from './routes';

import './styles/style.css'
const rootReducer = combineReducers({ postsReducer })
const sagaMiddleware = createSagaMiddleware()
const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(sagaMiddleware)))
sagaMiddleware.run(rootSaga)

ReactDOM.render((
    <Provider store={store}>
        <Router><Routes /></Router>
    </Provider>
), document.getElementById('root'))

这是我的saga.js

import { take, put, call, fork, select, takeEvery, all, takeLatest } from 'redux-saga/effects'
import PostApi from './api/postApi';
import { gotPosts } from './actions/celebrity';
import { POSTS } from '../types'

export function* getAllPosts () {
    const posts = yield call(PostApi.getPosts, {})
    console.log('postssss', posts)
    yield put(gotPosts(posts.data))
}

export function* watchGetPosts () {
    yield takeLatest(POSTS, getAllPosts)
}


export default function* root() {
    yield all([  fork(watchGetPosts) ])
}

这是我的action.js

import { POSTS } from '../../types';


export const gotPosts = (data) => {
    return {
        type: POSTS,
        data,
    }
}

export const getPosts = () => dispatch => {
    dispatch(gotPosts);
}

这是我发送操作的组件页面。

import React, { Component } from 'react';
import { Card, Row, Col } from 'antd';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux'
import { getPosts } from '../actions/celebrity';

const { Meta } = Card;

class  MainPage extends Component {
    componentDidMount () {
        console.log(this.props)
        this.props.getPosts();
    }
    render() {
        return <Row type="flex" className="main" justify="center" align="between">
             ......
        </Row>
    }
}

const mapStateToProps = state => {
    return {
        posts: state.postsReducer
    }
}
const mapDispatchToProps = dispatch => ({
    getPosts: () => {
    dispatch(getPosts());
    },
   });

export default connect(mapStateToProps, mapDispatchToProps)(MainPage);

postsReducer

export const postsReducer = (state = [], action) => {
    console.log(action)
    switch(action.type){
        case POSTS:
            return action.data;
        default:
            return state;
    }
}

Answer 1

您无法调度 函数 w/o 中间件支持。

问题源自 mapDispatchToProps：

{
  getPosts: () => { dispatch(getPosts()); }   
}

追溯到你的 actions.js, getPosts() returns dispatch => dispatch(gotPosts), 这实际上是一个函数而不是一个动作(plan javascript object), redux dispatch 默认不识别函数，除非你使用中间件来增强它，例如redux thunk。

因为你已经有了用于异步流的 redux saga，简单地从 mapDispatchToProps 调度一个动作应该没问题，还可以考虑创建单独的动作来区分 POSTS_REQUEST、POSTS_RECEIVE、POSTS_FAILURE 如果可能。

import {POST} from '....../actionTypes'
...
{
  getPosts: () => { dispatch({ type: POST }); }   
}