在自定义钩子中访问 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>
}