如何在comspoosition组件中用useselector替换maptostateprops

Question

嗨，我有一段旧代码，想用react redux钩子进行转换，有人能启发一下吗？

const Link = ({
active,
children,
onClick
}) => {
if (active) {
return <span>{children}</span>;
}
return (
<a href='#'
onClick={e => {
e.preventDefault();
onClick();
}}
>
{children}
</a>
);
};
const mapStateToLinkProps = (
state,
ownProps
) => {
return {
active:
ownProps.filter ===
state.visibilityFilter
};
};
const mapDispatchToLinkProps = (
dispatch,
ownProps
) => {
return {
onClick: () => {
dispatch({
type: 'SET_VISIBILITY_FILTER',
filter: ownProps.filter
});
}
};
}
const FilterLink = connect(
mapStateToLinkProps,
mapDispatchToLinkProps
)(Link);
const Footer = () => (
<p>
Show:
{' '}
<FilterLink filter='SHOW_ALL'>
All
</FilterLink>
{', '}
<FilterLink filter='SHOW_ACTIVE'>
Active
</FilterLink>
{', '}
<FilterLink filter='SHOW_COMPLETED'>
Completed
</FilterLink>
</p>
);

我知道如何将mapstatetoprops(state(替换为useselector(state(，但我不知道如何替换mapstatetopops(state，props(，这是项目链接：https://embed.plnkr.co/github/eggheadio-projects/getting-started-with-redux/master/29-react-redux-generating-containers-with-connect-from-react-redux-footerlink?show=script，预览

Answer 1

在使用mapstatetoprops时添加一个新的prop过滤器以替换以前的ownprops，如下所示：

const Link = ({
active,
children,
onClick,
+ filter
}) => {
+const active = useSelector(state => state.visibilityFilter == filter)