reactjs - “动作必须是普通对象”......但它是

Question

抱歉很常见的错误，但在下面的测试中不明白违规行为如何storeMgrAnnouncement(result)不是普通对象。api 调用和 thunk 动作是模拟的，但有问题的动作不是。

home.test.js

/* not showing 3rd party imports */

import Home from '../../components/home';
import {getMgrAnnouncement} from "../../__mocks__/actions";
import {STORE_MGR_ANNOUNCEMENT} from "../../constants";
import {success} from "../../__fixtures__/announcementGet";

const mockStore = configureStore([thunk]);

describe('Home Page', () => {

    var store = null;
    const initialState = {};

    beforeEach(() => {
        store = mockStore(initialState);
        shallow(<Home store={store} />);
    });

    it ('should store manager announcement after retrieving it', async () => {
        await store.dispatch(getMgrAnnouncement());
        expect(store.getActions()).toContainEqual({
            type: STORE_MGR_ANNOUNCEMENT, 
            payload: success
        });
    });

__mocks__/actions/index.js

import { storeMgrAnnouncement } from '../../actions';
import { success } from '../../__fixtures__/announcementGet';

/* mock api call */
function announcementGet() {
  return new Promise((resolve, reject) => {
    process.nextTick(() => {
      resolve(success)
    })
  })
}

/* mock thunk action */
export function getMgrAnnouncement() {
  return function(dispatch, getState) {
    return announcementGet()
    .then(result => {
      /*
         ERROR: Actions must be plain objects. Use custom middleware for async actions.
      */
      dispatch(storeMgrAnnouncement(result));
    })
  }
}

动作/index.js

import { STORE_MGR_ANNOUNCEMENT } from '../../constants';

export function storeMgrAnnouncement(result) {
  return {
    type: STORE_MGR_ANNOUNCEMENT,
    payload: result
  }
}

Answer 1

您正在发送 getMgrAnnouncement() 的结果

store.dispatch(getMgrAnnouncement())

但是该函数返回一个函数：

function getMgrAnnouncement() {
  return function(dispatch, getState) {

您必须调度一个对象，而不是一个函数。