Question

我有一个Delete函数，它使用Thunk首先通过CALL_API中间件调度DELETE操作，当promise被解析时，它会调度GET操作。

下面的代码成功执行了预期的行为。

  export const deleteShops = (shopId) => (dispatch, getState) => {

  let endpoint = `stores/${shopId}`;
  console.log('endpoint a enviar: ',endpoint)

  return dispatch({
    [CALL_API]: {
      // las acciones que ejecuta el middleware en loading, success y error.
      method: 'PATCH',
      types: [ SHOPS_DELETE_LOADING, SHOPS_DELETE_SUCCESS, SHOPS_DELETE_ERROR ],
      endpoint: endpoint,
      body: {
          "status" : "INACTIVE"
      },
      schema: Schemas.USER  // TODO: create a Schema for this
    }
  }).then((res) => {
    console.log('termino el delete con respuesta: ', res);
    console.log('el state es: ', getState());
    let page = getState().shops.data.page.number;
    let pageSize = getState().shops.data.page.size;
    let endpoint = `stores/search/advancedSearch?page=${page}&size=${pageSize}&projection=storeProjection`;

    //getShops({page:page, pageSize:pageSize, filtered:[], sorted:[]})();
    return dispatch({
      [CALL_API]: {
        // las acciones que ejecuta el middleware en loading, success y error.
        method: 'GET',
        types: [ SHOPS_GET_LOADING, SHOPS_GET_SUCCESS, SHOPS_GET_ERROR ],
        endpoint: endpoint,
        schema: Schemas.USER
      }
    })

  })
}

我想要做的是传递另一个Thunk函数而不是分派，以避免代码重复。这是我想传递给诺言的行动。

  export const getShops = (state, instance) => (dispatch, getState) => {

  let endpoint = `stores/search/advancedSearch?page=${state.page}&size=${state.pageSize}&projection=storeProjection`;

  // more endpoint forming code here, not relevant

  // endpoint
  console.log('endpoint a enviar: ',endpoint)

  return dispatch({
    [CALL_API]: {
      // las acciones que ejecuta el middleware en loading, success y error.
      method: 'GET',
      types: [ SHOPS_GET_LOADING, SHOPS_GET_SUCCESS, SHOPS_GET_ERROR ],
      endpoint: endpoint,
      schema: Schemas.USER // TODO: create a Schema for this
    }
  })
}

这是修改后的deleteShops操作。

export const deleteShops = (shopId) => (dispatch, getState) => {

  let endpoint = `stores/${shopId}`;
  console.log('endpoint a enviar: ',endpoint)

  return dispatch({
    [CALL_API]: {
      // las acciones que ejecuta el middleware en loading, success y error.
      method: 'PATCH',
      types: [ SHOPS_DELETE_LOADING, SHOPS_DELETE_SUCCESS, SHOPS_DELETE_ERROR ],
      endpoint: endpoint,
      body: {
          "status" : "INACTIVE"
      },
      schema: Schemas.USER // TODO: create a Schema for this
    }
  }).then((res) => {
    console.log('termino el delete con respuesta: ', res);
    console.log('el state es: ', getState());
    let page = getState().shops.data.page.number;
    let pageSize = getState().shops.data.page.size;
    let endpoint = `stores/search/advancedSearch?page=${page}&size=${pageSize}&projection=storeProjection`;

    getShops({page:page, pageSize:pageSize})();

  })
}

当我进行删除时，我会进入Chrome的控制台：

Uncaught (in promise) TypeError: dispatch is not a function
    at shops.js:47
    at shops.js:83
    at <anonymous>

我的理解是Thunk没有将调度方法传递给getShops。将这些行动联系起来的正确方法是什么？

Answer 1

这里是deleteShops函数调度函数而不是动作。请注意，在最后一部分，我将其传递给dispatch，而不是执行getShops函数。 Thunk中间件从那里获取它。

export const deleteShops = (shopId) => (dispatch, getState) => {

  let endpoint = `stores/${shopId}`;
  console.log('endpoint a enviar: ',endpoint)

  return dispatch({
    [CALL_API]: {
      // las acciones que ejecuta el middleware en loading, success y error.
      method: 'PATCH',
      types: [ SHOPS_DELETE_LOADING, SHOPS_DELETE_SUCCESS, SHOPS_DELETE_ERROR ],
      endpoint: endpoint,
      body: {
          "status" : "INACTIVE"
      },
      schema: Schemas.USER // TODO: create a Schema for this
    }
  }).then((res) => {
    console.log('termino el delete con respuesta: ', res);
    console.log('el state es: ', getState());
    let page = getState().shops.data.page.number;
    let pageSize = getState().shops.data.page.size;

    dispatch(getShops({page:page, pageSize:pageSize, sorted:[], filtered:[]}));

  })
}

如何从thunk promise中正确调用thunk函数？

1 个答案: