为什么我会收到"Error: Actions must be plain objects. Use custom middleware for async actions."错误？

Question

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

这是我的索引.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'))

这是我的传奇.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) ])
}

这是我的行动.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);

柱减速器

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)，这实际上是一个函数而不是一个 action(plan JavaScript 对象)，Redux 调度默认不识别函数，除非你使用中间件来增强它，例如 Redux Thunk。

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

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