useReducer dispatch实现类似react-thunk功能

最新推荐文章于 2024-08-04 20:48:15 发布

原创最新推荐文章于 2024-08-04 20:48:15 发布 · 390 阅读

0 ·

CC 4.0 BY-SA版权

react native 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了解决useReducer生成的dispatch无法处理函数型action的问题，通过使用自定义的useThunkReducer，它能更好地支持异步操作和复杂的action处理。

问题：useReducer生成的dispatch无法dispatch函数
解决：使用useThunkReducer代替useReducer

const wrapperDispatch = (dispatch, getState) => {
  return (action) => {
    if (typeof action === 'function') {
      action(wrapperDispatch(dispatch, getState), getState);
    } else {
      dispatch(action);
    }
  };
};

export const useThunkReducer = (reducer, defaultState) => {
  const [state, dispatch] = useReducer(reducer, defaultState);
  const getState = () => state;
  const newDispatch = wrapperDispatch(dispatch, getState);
  return [state, newDispatch];
};