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()返回dispatch => dispatch(gotPosts)，这实际上是一个函数而不是一个动作（计划javascript对象），默认情况下redux dispatch不会识别函数，除非您使用中间件来增强它，例如redux thunk。

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

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

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

1 个答案: