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?

imagine you want to use didMount to call fetch to get data from server. now what is solution in this situation? — morteza
– morteza, Commented Jul 22, 2019 at 8:14
that is built into hooks already reactjs.org/docs/hooks-effect.html — azium
– azium, Commented Jul 22, 2019 at 18:09
in function components use useEffect() hook for side-effects, so if you want to call a function in didMount call it in useEffect. — Ali Eslamifard
– Ali Eslamifard, Commented Aug 19, 2019 at 12:13

GROVER. · Accepted Answer · 2021-08-09 06:37:29Z

43

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.

edited Aug 9, 2021 at 6:37

GROVER.

4,4082 gold badges31 silver badges78 bronze badges

answered Oct 19, 2019 at 23:15

Medanko

7461 gold badge7 silver badges17 bronze badges

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

2 Comments

Victor Ejiogu Over a year ago

This answer does not answer the author's question.

A-Sharabiani Over a year ago

@Medanko in what scope do you define mapDispatchToProps?

Ying Rao · Accepted Answer · 2019-07-21 18:47:47Z

20

useSelector and useDispatch are React Hooks, which only work in function components.

https://reactjs.org/docs/hooks-overview.html#but-what-is-a-hook

With React Hooks, most components can and should be written with function components. If you have to write a class-based component, you can use connect from react-redux.

https://blog.logrocket.com/react-redux-connect-when-and-how-to-use-it-f2a1edab2013/

answered Jul 21, 2019 at 18:47

Ying Rao

4833 silver badges7 bronze badges

Comments

Amal J Varghese · Accepted Answer · 2021-04-03 09:38:33Z

0

class App extends Component {
    constructor(props){
        super(props)
        this.state = {
            reduxState : {}
        }
    }
    DummyView = () => {
        const reducer = useSelector(state => state.reducer)
        useEffect(() => {
            this.setState({
                reduxState : reducer
            })
        }, [])
        return null
    }
    render(){
        return(
            <this.DummyView/>
        )
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

answered Apr 3, 2021 at 9:38

Amal J Varghese

91 bronze badge

Comments

Marvin · Accepted Answer · 2024-03-01 03:01:37Z

use HOC (Higher Order Component), for me this is the simplest way to use hooks in class component

class MyComponent extends React.PureComponent {}

const MyHoc = () => {
   const counter = useSelector();
   return <MyComponent counter={counter} />
}

or there are some cases that you want to select state that accept arguments, you may still use mapState

const mapState = ({state}) => ({
   getComments(post_id) {
      return state.comments.find(cmts => cmts.post_id === post_id)
   }
})

const connector = connect(mapState)(MyComponent)

and consume the function through this

const MyHoc = ({post_id, getComments}) => {
   const comments = getComments(post_id)
   const counter = useSelector();

   // and use the comments somewhere
   return <MyComponent counter={counter} />
}
export default connector(MyHoc)

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related