How can I use react-redux useSelector in class component?

Question

I am new in react and trying to learn redux. I want to access the store inside a class, but it gives me an error the I cant use hook in class.

When I use this code in function (as I saw in a YouTube tutorial), it works without any problem. Here I access to counter in the store.

 function App() {       const counter = useSelector(state => state.counter);            return <div>{counter}</div>;     } 

but when I want to do this in class, it gives me an error that I can't use hooks in class.

So how can I access to my store either useSelector or useDispatch in class component?

Answer 1

As @Ying Zuo said, your method works only with Functional Components. To solve this problem:

Instead of this line:

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

You define the counter state like this:

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

Then for dispatching you should use it like this:

const mapDispatchToProps = () => ({      increment,      decrement }); 

At the end you combine everything like this:

export default connect(     mapStateToProps,     mapDispatchToProps() )(App); 

Don't forget to import increment and decrement from your action and connect from the react-redux module.