Question

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

自定义挂钩：

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

我的组件

{{1}}

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

Answer 1

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

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

import { useSelector } from 'react-redux';
function useMyCustomHook(state) {
  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>
}

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

1 个答案: