在 React 中的操作中获取数据

Question

我正在开发一个项目，我必须在操作中获取一些数据。

这是操作文件：

import {
  REQUEST_DEFERRED_PAYMENTS,
  SELECT_LINE_ITEM,
} from '../constants/actionTypes';
import { SUCCESS } from '../constants/status';
import { orders } from '../constants/data'; // hard-coded data

export const selectLineItem = (lineItems, total) => {
  return {
    type: SELECT_LINE_ITEM,
    response: {
      lineItems,
      total,
    },
  };
};

export const fetchDeferredPayments = (query) => {
  // TODO: FETCH FROM API
  // hardcoded data

  if (orders) {
    return {
      type: `${REQUEST_DEFERRED_PAYMENTS}_${SUCCESS}`,
      response: orders,
    };
  }
  return {};
};

export const buildQuery = (params) => {
  // TODO:
};

此时，数据是硬编码的，从

/constants/data

中取出并存储到

orders

中。

我想知道是否可以替换内部硬编码数据的使用

fetchDeferredPayments

。

卷曲看起来像这样：

curl --location --request GET 'tfcommerce-api-eks.cloudqa.thermofisher.net/api/store/orders/deferred-payments/search' \
--header 'Content-Type: application/json' \
--header 'userId: 915918' \
--header 'countryCode: kr' \
--header 'Authorization: Basic dGZkZWZlcnJlZHBheW1lbnRzOnRoZXJtb2Zpc2hlXXX=' \
--header 'Cookie: JSESSIONID=D330BF758C8F9E916031DC51CD25FXXX' \
--data-raw '{
"searchQueryParams": {
"orderType": "tc",
"dateFrom": "2019-11-20",
"dateTo": "2020-11-25"
},
"requestOptions": {
"sortOrder": "asc",
"sortProperty": "orderDate"
}
}'

出于安全原因，我替换了授权和 Cookie 标头中的最后一个字符。

Answer 1

您应该使用

redux-thunk

通过

dispatch

手动触发action内的操作并返回一个action，因为您无法在

promise.then(() => {})

内返回任何内容

替代方案可以是

redux-promise

，它会为你解决承诺。

下面是 thunk 示例

通常，您应该像这样构建

export const fetchDeferredPayments = (query) => {
  // TODO: FETCH FROM API
  // hardcoded data
  
  // When the API request start, dispatch START action, for triggering loading 
  // spinner or something like this on the application state
  dispatch(callAPIStart());

  callAPI()
    .then(orders => dispatch(callAPISuccess(orders)))      
    .catch(error => dispatch(callAPIFailed))
};

const callAPISuccess = (orders) => ({ type: CALL_API_SUCCESS, payload: orders })

减速机开关盒内部：

case CALL_API_SUCCESS: return {...state, orders: action.payload}

上面的代码只是想法，因为我没有你的完整代码。如果有任何问题欢迎提问。