useDispatch 使用较低版本的 react-redux

Question

我遇到了一个使用 useDispatch 找不到的函数。假设我应该使用 react-redux，不幸的是，我的版本是 6.0.0，需要的是 7.0.0 及更高版本。我想探索 useDispatch 或相关的钩子来在函数组件中调度动作函数。鉴于我无法升级我的 react-redux 并仍然使用功能组件，我该怎么做？

我的替代方法是使用类组件，但同样，我希望在函数组件中看到这项工作。让我知道还需要什么其他细节。

这是我的代码。

import React, { useDispatch } from 'react';
import {
    Tooltip,
    IconButton,
    Icon,
} from '@material-ui/core';
import { logout } from './auth/store/actions';

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

  const handleClick = () => {
    dispatch(logout());
  };

  return (
    <Tooltip title="Logout" placement="bottom">
        <IconButton className="w-64 h-64" onClick={handleClick}>
            <Icon>exit_to_app</Icon>
        </IconButton>
    </Tooltip>
  );
};

export default QuickLogout;

这是编译时的错误。

TypeError: Object(...) is not a function
QuickLogout
webpack-internal:///.....onents/QuickLogout.js:18:75

编辑：我提到了探索 useDispatch 或相关的钩子，因为我无法升级。我觉得这是一个灰色的声明，因为我真的只是希望我的代码能够工作。这意味着，解决方案不仅限于 useDispatch 或其他钩子。因此，我选择了不使用 useDispatch 或 hooks 的答案，因为它很简单。为含糊的陈述道歉。我会注意提高我的写作技巧。

Answer 1

React 本身没有 useDispatch Hooks API，但它有 useReducer 用于消除 redux 的小项目，redux 对他们来说是一个过度设计的过程。

另一方面，react-redux 的新版本提供了新的方便的钩子，您可以自己制作类似的钩子。

这里有一个提示

Hooks（React hooks）只能用在功能组件中
HOC（高阶组件）可以在任何地方使用

react-redux 提供的connect 函数是 HOC，因此它也可以与类基​​组件和函数组件一起使用。将您的演示 UI 和逻辑分离为 representationals 和 containers 也是一个很好的做法，因此您的组件可以正常工作并使用可以在传统类组件中使用的所有花哨的东西是没有问题的并通过 react-redux 连接。

您也可以制作自定义挂钩，以便以可重用的方式处理此类事情，而代码更少。

// setup.js
const store = createStore(/* put your reducer and enhancers here */)
export const { dispatch, getState } = store

// hooks.js
import { dispatch, getState } from '~setup.js'

export const useDispatch = () => dispatch
export const useSelector = selector => selector(getState())

然后在你的组件中

import { useDispatch } from '~hooks.js'
import { logout } from './auth/store/actions'

export default function QuickLogout() {
  const dispatch = useDispatch()
  
   const handleClick = () => {
    dispatch(logout())
  }

  return (
    <Tooltip>
        <IconButton onClick={handleClick}>
            <Icon>exit_to_app</Icon>
        </IconButton>
    </Tooltip>
  )
}

如果您想了解有关自定义挂钩的更多信息，请参阅making my own hook。

Answer 2

如果您无法使用 useDispatch 和 useSelector React 挂钩将您的 react-redux 版本升级到一个版本，您仍然可以使用 connect 高阶组件来注入 dispatch，或者更简单地包装致电dispatch，您的动作创建者。

import { connect } from 'react-redux';

const QuickLogout = ({ logout }) => { // <-- destructure logout prop
  return (
    <Tooltip title="Logout" placement="bottom">
      <IconButton
        className="w-64 h-64"
        onClick={logout} // <-- assign to click handler
      >
        <Icon>exit_to_app</Icon>
      </IconButton>
    </Tooltip>
  );
};

const mapDispatchToProps = {
  logout, // <-- inject logout action as prop already wrapped by dispatch!
};

const ConnectedQuickLogout = connect(
  null, // <-- this is typically mapStateToProps, but we don't need it
  mapDispatchToProps,
)(QuickLogout);

export default ConnectedQuickLogout;

如果您希望代码更接近原样，那么您只需将其连接到 redux 存储区，dispatch 仍然会被注入。

import { connect } from 'react-redux';

const QuickLogout = ({ dispatch }) => {
  const handleClick = () => {
    dispatch(logout());
  };

  return (
    <Tooltip title="Logout" placement="bottom">
        <IconButton className="w-64 h-64" onClick={handleClick}>
            <Icon>exit_to_app</Icon>
        </IconButton>
    </Tooltip>
  );
};

export default connect()(QuickLogout);