Question

我正在使用带有redux和Api调用的工作网络版本并将它们移植到React Native应用程序。但是我注意到在尝试发送一个thunk来进行API调用时，我似乎无法在我的thunk中看到一个控制台日志来确认调度。这让我觉得某些东西没有正确连接，但我只是不知道那是什么。我错过了什么？

我创建了一个具有初始状态的商店：当我记录store.getState()时，一切看起来都很好。

const initialState = {
  config: fromJS({
    apiUrl: "http://localhost:3000/account-data",
  })
}
const store = createStore(
  reducers,
  initialState,
  compose(
    applyMiddleware(thunk),
  )
)

我使用mapDispatchToProps，我看到道具列表中的函数

export function mapDispatchToProps(dispatch) {
  return {
    loadProducts: () => dispatch(loadProducts())
  };
}

但是，当我检查loadProducts函数时，我没有看到确认调度的控制台日志。这里发生了什么？为什么loadProducts没有调度？在网络版本上，我能够确认网络请求和日志。在React Native上我没有看到网络请求或这些控制台日志。

export function loadProductsCall() {
  console.log('in RN loadProductsCall') //don't see this
  const opts = constructAxpOpts();
  return {
    [CALL_API]: {
      types: [
        LOAD_REQUEST,
        LOAD_SUCCESS,
        LOAD_FAILURE
      ],
      callAPI: (client, state) =>
        client.get(`${state.config.get('apiUrl')}/members`, opts),
      shouldForceFetch: () => false,
      isLoaded: state => !!(state.core.resources.products.get('productsOrder') &&
        state.core.resources.products.get('productsOrder').length),
      getResourceFromState: (state) => state.core.resources.products.toJS(),
      isLoading: state => !!state.core.resources.products.get('isLoading'),
      getLoadingPromise: state => state.core.resources.products.get('loadingPromise'),
      payload: {}
    }
  };
}

export function loadProducts() {
  console.log('in loadProducts') //don't see this
  return (dispatch) =>
  console.log('in loadProducts dispatched 2') //don't see this either 
    dispatch(loadProductsCall())
      .then((response) => {
        return response;
      });
}

Answer 1

此代码缺少处理三种操作类型的自定义API中间件。此外，在mapDispatchToProps中，函数正在包装调度。此函数需要解包并返回promise或在代码中的其他位置调用。

react-redux不会调度thunk api调用

1 个答案: