接收 Promise 的自定义 Hook答案

【问题标题】：Custom Hook receiving a Promise接收 Promise 的自定义 Hook
【发布时间】：2019-05-08 14:49:09
【问题描述】：

我创建了一个Custom Hook。在这个钩子中，我收到了来自loadRates() 的 Promise：

export const actions = {
  updateRate: () =>
    loadRates()
      .then(response => ({
        type: types.UPDATE_RATE,
        value: response
      }))
      .catch(reject => ({
        type: types.ERROR_UPDATE_RATE,
        value: reject
      }))
};

export const reducer = (state, action) => {
  switch (action.type) {
    case types.UPDATE_RATE:
      return { ...state, rates: action.value, loading: false };
    case types.ERROR_UPDATE_RATE:
      return { ...state, error: action.value, loading: false };
    default:
      throw new Error("Action type must be defined");
  }
};

问题是即使我有来自loadRates() 的response，我也会收到Action type must be defined 错误，因为我的state 是pending。

我应该怎么做才能纠正这个问题？

提前致谢！

编辑：codesandbox here

【问题讨论】：

你的自定义钩子在哪里？
我认为您错过了为您的操作定义 action.type 。据我所知，这是一个关于 redux 操作的问题，而不是 react-hooks 或 promises
这是我的自定义钩子。问题是它没有等待actions 而是转到reducer。所以，因为我的state 是pending，它会抛出错误。 action.type 在export const actions 中定义，在loadRates().then 和loadRates().catch 内部
你能用它做一个有效的小提琴吗？
好的，会做的！

标签： javascript reactjs react-hooks

【解决方案1】：

问题是来自useReducer 的dispatch 函数来自Store.js 是用一个Promise 调用的，actions.updateRate 在ratesReducer.js 中的返回。

这个dispatch参数必须是一个带有type属性的对象（在redux中也是一样）。解决您的问题的一种方法是在承诺解决或拒绝时进行调度。在 redux 中，你可以使用一个 thunk，有一个库。话虽如此，我将明确说明 thunk 的工作原理，以便您有更好的概览。让我们增强基本调度，并将其提供给上下文提供者：

export const StoreProvider = props => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const thunkDispatch = action => {
    if (typeof action === "function") {
      return action(dispatch);
    }

    return dispatch(action);
  };

  return (
    <StoreContext.Provider value={{ state, actions, dispatch: thunkDispatch }}>
      {props.children}
    </StoreContext.Provider>
  );
};

您的异步操作现在可以是将调度作为参数的函数。

const updateRate = dispatch => // get dispatch from parameters
  loadRates()
    .then(response => dispatch({ // add dispatch here
      type: types.UPDATE_RATE,
      value: response
    }))
    .catch(reject => dispatch({ // add dispatch here too
      type: types.ERROR_UPDATE_RATE,
      value: reject
    }))

这是更新的笔：https://codesandbox.io/s/3qx982292p。看看redux-thunk，这个问题并不新鲜，已经有很多知识了。

【讨论】：