功能部件的redux挂钩

Question

• 我试图将redx转换为redux挂钩。
• 所以我研究并找到了此链接https://medium.com/javascript-scene/do-react-hooks-replace-redux-210bab340672
• 我几乎没有什么改变。
• 但无法继续进行。
• 如果你们让我知道一个组成部分，那就太好了。
• 我可以为别人做。 -如果取消注释按钮导出，则可以看到不带钩子的工作代码
• 在下面提供我的代码段。

https://codesandbox.io/s/boring-wu-btlre

function useHackerNews(props) {
  const hackerNews = useSelector(state.channel);

  const dispatch = useDispatch();
  return (
    <button
      onClick={() => {
        getPosts(channel);
        getAlert();
      }}
      className="btn btn-primary btn-lg btn-block"
    >
      Get top news
    </button>
  );
}

Answer 1

基本上，您使用“ useSelector”转换“ mapStateToProps”

所以这：

const mapStateToProps = state => ({ channel: state.channel });

变为：

const channel = useSelector(state => state.channel);

您的“ mapDispatchToProps”将使用“ useDispatch”进行转换

因此，您可以转换：

const mapDispatchToProps = { getPosts: fetchPosts, getAlert: displayAlert };

至：

const getPosts = () => useDispatch(fetchPosts());
const getAlert = () => useDispatch(displayAlert());

希望有道理！

Answer 2

useSelector接受一个以redux存储状态为参数的函数，使用存储状态返回所需数据

const hackerNews = useSelector(state => state.channel);

这是更新的codeandbox： https ://codesandbox.io/s/jolly-faraday-9eyk5