redux-thunk：操作必须是普通对象

Question

我一直在尝试使用 redux 和 redux-thunk 来帮助从 api 中获取 json 文件，但一直收到警告，指出 action must be a plain object.我真的很困惑代码中的问题所在。我已经尝试关注许多其他 Whosebug 帖子和一些在线指南，但并没有真正了解我哪里出错了。我知道这是我如何引用 async 和 dispatch 的问题，但不知道如何解决它。

这是导致模拟器中出现警告的函数

export const fetchData = url => {
  console.log("Should enter async dispatch");
  return async (dispatch) => {
    dispatch(fetchingRequest());
    fetch("https://randomuser.me/api/?results=10")
      .then(response => {
        if (response.ok) {
          let json = response.json();
          dispatch(fetchingSuccess(json));
          console.log("JSON", json);
        }
      })
      .catch(error => {
        dispatch(fetchingFailure(error));
        console.log("Error", error);
      });
  };
};

这是控制台中的输出

Possible Unhandled Promise Rejection (id: 0):
Error: Actions must be plain objects. Use custom middleware for async actions.
Error: Actions must be plain objects. Use custom middleware for async actions.

编辑：包括中间件的设置

我在我的应用程序的 index.js 文件中设置了中间件

index.js

import { AppRegistry } from "react-native";
import App from "./App";
import { name as appName } from "./app.json";
import { Provider } from "react-redux";
import React, { Components } from "react";
import { createStore, applyMiddleware } from "redux";
import appReducer from "./src/data/redux/reducers/appReducer";
import thunk from "redux-thunk";

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);

const store = createStoreWithMiddleware(appReducer);
console.log("Store", store.getState());
const AppContainer = () => (
  <Provider store = {store}>
    <App />
  </Provider>
);

AppRegistry.registerComponent(appName, () => AppContainer);

我从 Youtube 教程中学习了商店的实现。

编辑 2：添加 fetchData 调用

我在这样的 _onPress 函数中调用 fetchData

_onPress = () => {
    const {fetchData} = this.props;
    let url = "https://randomuser.me/api/?results=10";
    fetchData(url);
    console.log("should have fetched");
  };

这就是我的应用程序连接到 redux

的方式

const mapStateToProps = state => {
  return { response: state };
};

const mapStateToDispatch = dispatch => ({
  fetchData: url => dispatch(fetchData(url)),
});

export default connect(
  mapStateToProps,
  mapStateToDispatch
)(SearchScreen);

这些是我应用程序中的操作

export const fetchingRequest = () => {
  {
    type: FETCHING_REQUEST;
  }
};

export const fetchingSuccess = json => {
  {
    type: FETCHING_SUCCESS;
    payload: json;
  }
};

export const fetchingFailure = error => {
  {
    type: FETCHING_FAILURE;
    payload: error;
  }
};

Answer 1

感谢 Michael Cheng，我按照评论中的步骤解决了问题。我最终发现问题是我对普通对象进行了操作，但它们没有返回任何东西。

原来的动作是

export const fetchingRequest = () => {
  {
    type: FETCHING_REQUEST;
  }
};

export const fetchingSuccess = json => {
  {
    type: FETCHING_SUCCESS;
    payload: json;
  }
};

export const fetchingFailure = error => {
  {
    type: FETCHING_FAILURE;
    payload: error;
  }
};

到这个

export const fetchingRequest = () => {
  return {
    type: FETCHING_REQUEST
  }
};

export const fetchingSuccess = json => {
  return {
    type: FETCHING_SUCCESS,
    payload: json
  }
};

export const fetchingFailure = error => {
  return {
    type: FETCHING_FAILURE,
    payload: error
  };
};

包含每个操作的 return

redux-thunk：操作必须是普通对象

redux-thunk: actions must be plain objects

react-native

redux

redux-thunk