Question

我一直在尝试使用redux和redux-thunk来帮助从api获取json文件，并一直收到警告，指出action must be a plain object。对于代码中的问题，我确实感到困惑。我曾尝试过许多其他stackoverflow帖子和一些在线指南，但并没有真正了解我要去哪里。我了解这是我如何引用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调用

我在fetchData函数中调用_onPress

_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），通过按照评论中的步骤进行工作，我得以解决问题。我最终发现问题是我对普通对象执行了操作，但是它们什么也没返回。

原始动作是

unsigned int

对此

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 }; };

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

1 个答案: