0
  • 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>
  );
}
Improve this question

2 Answers 2

Reset to default
1

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!

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

hey can you update in the sandbox, its so confusing :(
0

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

Improve this answer

1 Comment

hey can you update in the sandbox, its so confusing :(

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.