为什么我会收到“错误：操作必须是普通对象。使用自定义中间件进行异步操作。”错误？

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

您无法在没有中间件支持的情况下调度 函数。

问题源于 mapDispatchToProps：

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

追溯到你的actions.js，getPosts()返回dispatch => dispatch(gotPosts)，这实际上是一个函数而不是一个动作（计划javascript对象），redux调度默认不识别函数，除非你使用中间件来增强它，例如redux thunk。

由于您已经有用于异步流的 redux saga，只需从 mapDispatchToProps 调度一个操作就可以了，如果可能，还可以考虑创建单独的操作来区分 POSTS_REQUEST、POSTS_RECEIVE、POSTS_FAILURE。

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