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

Question

我有一个 Delete 函数，它使用 Thunk 首先通过 CALL_API 中间件调度一个 DELETE 操作，当承诺被解析时，它调度一个 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 函数而不是调度，以避免代码重复。这是我要传递给 promise 的操作。

  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 函数。请注意最后一部分，我没有执行 getShops 函数，而是将其传递给 dispatch。 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 函数？

How to properly call a thunk function from a thunk promise?

redux

redux-thunk

react-redux