react-redux 没有调度 thunk api 调用

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 中，一个函数正在包装调度。此函数需要展开并 return 一个承诺或在代码中的其他地方调用。

react-redux 没有调度 thunk api 调用

react-redux not dispatching thunk api call

reactjs

react-native

redux

react-redux

redux-thunk