在自定义钩子中访问 Redux 状态？

Question

我需要一个使用 Redux 状态的自定义钩子。如果你要将状态从 React 组件传递给函数，它看起来像：

自定义钩子：

function useMyCustomHook(state) {
  const { message } = state;

  const handleClick = () => {
    if(environment_variable) {
      // do something with message
    } else {
      // do something else with message 
    }
  }

  return handleClick;
}

我的组件：

const MyComponent = ({ state }) => {
  return <button onClick={()=> useMyCustomHook(state) }>Go</button>
}

每次都必须从 React 组件传递 Redux 的状态有点痛苦。是否可以直接在自定义钩子中访问状态？

Answer 1

使用最新版本的 react-redux，您可以使用 useSelector 钩子。

还要注意，不应该在处理程序上调用钩子

import { useSelector } from 'react-redux';
function useMyCustomHook() {
  const message = useSelector(state => state.message);

  const handleClick = () => {
    if(environment_variable) {
      // do something with message
    } else {
      // do something else with message 
    }
  }

  return handleClick;
}

它会像这样使用

const MyComponent = ({ state }) => {
  const handleClick = useMyCustomHook();
  return <button onClick={handleClick}>Go</button>
}