错误：操作必须是普通对象。使用自定义中间件进行异步操作。答案

【问题标题】：Error: Actions must be plain objects. Use custom middleware for async actions.错误：操作必须是普通对象。使用自定义中间件进行异步操作。
【发布时间】：2018-02-24 20:28:26
【问题描述】：

我目前正在开发一个使用 reactjs 的应用程序，该应用程序利用了 react-router、redux、thunk 和 firebase 等技术。不幸的是，当我调度异步操作时出现以下错误。

我查看了 stackoverflow 提出的所有类似问题，但仍然找不到问题所在。

任何帮助将不胜感激。

错误：

app.js:54628 错误：操作必须是普通对象。使用自定义中间件进行异步操作。调度时 (app.js:31576) 在 Object.fetchBase (app.js:32220) 在 Object.next (app.js:63640) 在 app.js:54507 在 app.js:54622 在

package.json

...
"react-router-dom": "^4.1.1",
"react-router-redux": "^4.0.8",
"redux-thunk": "^2.2.0",
"redux": "^3.7.1",
...

store.js

import { createStore, applyMiddleware, compose } from 'redux';
import reduxThunk from 'redux-thunk';
import { routerMiddleware } from 'react-router-redux';
import { browserHistory } from 'react-router-dom';

// Import the root reducer
import allReducers from './reducers';

// import default data
import config from './data/config';

const defaultState = {
  events: [],
  config,
  activeGame: null,
  basePath: '',
};

const router = routerMiddleware(browserHistory);
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(allReducers, defaultState,
  composeEnhancers(applyMiddleware(reduxThunk, router)));

export default store;

Actions.js

...
export const fetchBase = () => {
  const organizationRef = database.ref(`users/${auth.currentUser.uid}/organization`);
  return dispatch => {
    organizationRef.once('value', snapshot => {
      dispatch({
        type: ActionTypes.FETCH_BASE,
        payload: snapshot.val()
      });
    });
  };
}; // fetchBase
...

【问题讨论】：

不太了解您的代码（在哪里调用了操作），但显然您的操作返回函数而不是对象。
当用户登录网站时，我会调用this.props.fetchBase() 以获取用户在firebase 中的特定基本目录。

标签： reactjs firebase asynchronous redux redux-thunk

【解决方案1】：

我认为 organizationRef.once 返回 firebase.Promise 这就是您收到该错误的原因。

【讨论】：

Redux Thunk 应该处理任何异步请求。
是的，但你不应该让organizationRef.once('value', snapshot => { return dispatch({ type: ActionTypes.FETCH_BASE, payload: snapshot.val() }); });
需要外层函数将dispatch函数传递给firebase Promise。这部分代码适用于我编写的另一个应用程序。这是一个关于它如何工作的更好和更详细解释的链接。 link
嗯。这确实很奇怪。我找到了一个用于 redux 和 firebase 的库：github.com/prescottprue/react-redux-firebase 也许这会对你有所帮助。

【解决方案2】：

您的动作创建者看起来不错，但尝试像这样将ref 获取到 firebase 数据库：

firebase.database().ref(`/users/${uid}/employees`)

【讨论】：

感谢您的 cmets。我没有在我发布的示例中显示这一点，但在我的actions.js 的早些时候，我像这样初始化我的数据库。 const database = firebase.database();

【解决方案3】：

您的动作创建器看起来不错。错误消息表明，您没有正确注册 redux-thunk 中间件。

尝试如下导入：

import thunk from 'redux-thunk';

然后用

应用它

const store = createStore(allReducers, defaultState,
   composeEnhancers(applyMiddleware(thunk, router)));

从：redux-thunk repo得到这个

【讨论】：

【解决方案4】：

感谢大家的帮助。我确实发现了问题并且正在踢自己。上面的代码工作正常，问题是我在哪里注册了商店。我正在导入一个用于测试目的的辅助存储文件。更新了实体店后，忘记切换了。

【讨论】：