在组件外部使用 redux hooks 来实现代码可重用性

Question

我有一个功能组件如下，我有一个有两个分派的功能。一个设置错误消息，另一个在短暂的超时时间后删除错误消息。设置错误和清除的功能存在于许多其他组件中，因此我希望在另一个文件中具有两个调度函数以允许代码重用。我无法做到这一点，因为我收到一个错误，说我只能在功能组件中使用 useDispatch。我如何克服这个？

组件

const Checkout = () => {
  const dispatch = useDispatch();

  const setErrors = (payload) => {
   dispatch({
     type: 'SET_ERRORS',
     payload,
   });

  setTimeout(() => {
    dispatch({
     type: 'CLEAR_ERRORS',
    });
  }, 2500);
 };

 return (
  <>
 // JSX stuff come here
  <>
 )
}

减速机

const initialState = {
  message: null,
  status: false,
};

export default (state = initialState, action) => {
  switch (action.type) {
    case 'SET_ERRORS':
      return {
        ...state,
        message: action.payload,
        status: true,

      };
    case 'CLEAR_ERRORS':
      return {
        ...state,
        message: null,
        status: false,

      };
    default:
      return state;
  }
};

Answer 1

带有钩子的2021 年更新

useDispatch在组件外部使用会导致错误。

首先，store从 redux导入您的将军，然后使用 dispatch 方法。例如：

import store from 'YOUR_DESTINATION_TO_REDUX_STORE'

function doSomething() {
    // do your stuff
    
    store.dispatch(YOUR_ACTION())
}

Answer 2

您可以创建自己的自定义挂钩，例如useErrorDispatcher，并在许多功能组件中使用它。另请注意，挂钩仅允许在功能组件内使用。

export const useErrorDispatcher = () => {
    const dispatch = useDispatch();

    return (payload) => {
        dispatch({ type: 'SET_ERRORS', payload});
        setTimeout(() => dispatch({type: 'CLEAR_ERRORS'}), 2500);
    }
}

用法：

const MyComponent = (props) => {
    const errorDispatcher = useErrorDispatcher();

    return (
        <button onClick={() => errorDispatcher('an error occurred')} />
    );
}