Question

我正在使用redux-thunk中间件（RactNative应用程序）。我的动作创作者可在多个屏幕上正常使用。但是最近我添加了一个新屏幕，其中也使用了这些动作创建者。问题是当我给他们打电话时，他们没有返回Promise，这与其他屏幕不同。我在动作创建者上附加了.then回调函数，该回调函数抛出一个错误，提示.then is not a function。

这是我的屏幕：

import ... ;
import { connect } from "react-redux";
import {
  cancelAsync,
  acceptAsync
} from "../redux/actions";

function PreviewScreen(props) {
  const {
    ...
    acceptAsync,
    cancelAsync
  } = props;

  console.log(cancelAsync()); // returns function body: ƒ (dispatch, getState) { ...

  const accept = id => {
    acceptAsync(id).then(() => {...});
  };

  const cancel = id => {
    cancelAsync(id).then(() => {...});
  };

  return ...
}


const mapStateToProps = ... ;

const mapDispatchToProps = dispatch => {
  return {
    dispatch,
    cancelAsync,
    acceptAsync
  };
};

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

这些是我的动作创作者：

import axios from "axios";
import {
  acceptURL,
  cancelURL,
} from "../../constants";

export const acceptAsync = id => {
  return function(dispatch, getState) {
    const request = axios.post(
      acceptURL,
      { id },
      {
        headers: {
          Authorization: `Token ${token}`
        }
      }
    );

    request
      .then(response => {
        ...
        return response;
      })
      .catch(reason => {
        ...
        return reason;
      });

    return request;
  };
};

export const cancelAsync = (orderID, status) => {
  return function(dispatch, getState) {
    const request = axios.post(
      cancelURL,
      {},
      {
        headers: {
          Authorization: `Token ${token}`
        }
      }
    );

    request
      .then(({ data }) => {
        ...
        return data;
      })
      .catch(reason => {
        ...
        return reason;
      });

    return request;
  };
};

我可能会缺少什么？仅在此屏幕上发生。

另一屏正常运行的一段代码：

import {
  acceptOrderAsync,
  cancelOrderAsync,
  setNewOrdersAsync
} from "../redux/actions";

function NewOrdersScreen(props) {
  const {
    ...
    setNewOrdersAsync,
    acceptOrderAsync,
    cancelOrderAsync,
    navigation
  } = props;

  ...
}

const mapStateToProps = ({ newOrders }) => ({ ...newOrders });

export default connect(
  mapStateToProps,
  { acceptOrderAsync, cancelOrderAsync, setNewOrdersAsync }
)(NewOrdersScreen);

动作创建者未连接到Redux

0 个答案: