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

Question

Я постоянно получаю «Действия должны быть простыми объектами. Используйте пользовательское промежуточное ПО для асинхронных действий». ошибка, и я полностью застрял здесь. Что я делаю не так, пожалуйста, помогите мне разобраться и избавиться от этой ошибки.

Это мой файл index.js, в который я интегрировал хранилище редуксов в приложение.

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

это моя сага.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), по умолчанию редукционная диспетчеризация не распознает функции, если вы не используете промежуточное ПО для ее улучшения. , редукционный thunk например.

Поскольку у вас уже есть сага о редуксе для асинхронного потока, просто отправьте действие из mapDispatchToProps должно быть в порядке, также рассмотрите возможность создания отдельных действий, чтобы различать POSTS_REQUEST, POSTS_RECEIVE, POSTS_FAILURE, если это возможно.

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