redux-thunk：动作没有调度

Question

我正在尝试在 React Native 中构建一个应用程序，该应用程序假设接受用户的两个输入，然后对 api 进行查询并获取有关这两个输入的信息。我一直在使用 redux 和 redux-thunk 遇到问题，特别是异步操作。

这是我的应用程序中我特别遇到问题的代码

export const fetchData = url => {
  console.log("start Fetching");
  return async dispatch => { // this is where the problem is
    dispatch(fetchingRequest());
    try {
      const response = await fetch("https://randomuser.me/api/?results=10");
      const json = await response.text();
      if (response.ok) {
        dispatch(fetchingSuccess(json));
        console.log("JSON", json);
      } else {
        console.log("fetch did not resolve");
      }
    } catch (error) {
      dispatch(fetchingFailure(error));
    }
  };
  console.log("Fetched data");
};

调试该函数后，我发现当调用 fetchData 函数时该函数将执行，但返回的异步调度具有未定义的行为。

调用函数时调试器中的输出应该是

start Fetching
JSON file information/Error

但调试器中的输出实际上是

start Fetching

这是在

中调用了fetchData的函数

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

这是我添加的mapDispatchToProps功能。问题是我不知道在函数中添加什么。

const mapStatetoDispatch = (url, dispatch) => {
  return {dispatch(fetchData(url))}; // do not know what to place in body of function

};

我已经在组件中用

连接了它

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

如果需要，这些是我导入的动作创建者

import {
  fetchingSuccess,
  fetchingRequest,
  fetchingFailure,
  fetchData
} from "../data/redux/actions/appActions.js";

Answer 1

假设你添加了redux-thunk作为中间件，看起来错误在这里：

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

和

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

redux-thunk：动作没有调度

redux-thunk: actions are not dispatching

react-native

redux

redux-thunk