redux hooks for functional component

Question

• I tried to convert redx into redux hooks.
• so I researched and found this link https://medium.com/javascript-scene/do-react-hooks-replace-redux-210bab340672
• I was able to make few changes.
• but not able to proceed further.
• It would be great if you guys let me know for one component.
• I can do it for others. -If you uncomment Button export you can see working code without hooks
• providing my code snippet below.

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 takes a function with the state of redux store as a parameter, use the state of the store to return the desired data

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

Here's the updated codesandbox: https://codesandbox.io/s/jolly-faraday-9eyk5

Answer 2

basically you convert ´mapStateToProps´ using ´useSelector´

So this:

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

Becomes:

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

Your ´mapDispatchToProps´ is converted using ´useDispatch´

So you can convert:

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

To:

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

Hope that makes sense!