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

Posted 2023-02-19

【中文标题】在组件外部使用 redux 钩子来实现代码的可重用性

【英文标题】：Using redux hooks outside of a component for code reusability

【发布时间】：2020-04-19 17:41:16

【问题描述】：

我有一个如下的功能组件，我有一个有两个分派的功能。一个设置错误消息，另一个在短暂的超时时间后删除错误消息。设置错误和清除的功能来自许多其他组件，因此我希望在另一个文件中拥有两个调度函数以允许代码可重用性。我无法执行此操作，因为我收到一条错误消息，提示我只能在功能组件内使用 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;
  
;

【参考方案1】：

UPDATE 2021 带钩子

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

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

import store from 'YOUR_DESTINATION_TO_REDUX_STORE'

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

【参考方案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') />
    );

【参考方案3】：

const setErrors = (payload, dispatch) => 

修改setErrors 函数以采用附加参数dispatch。现在您应该可以在许多组件中重用setErrors。