How can I use react-redux useSelector in class component?
Solution 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.
Solution 2
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/
Solution 3
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>
morteza
Updated on November 04, 2021Comments
-
morteza over 2 years
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?
-
Victor Ejiogu over 4 yearsThis answer does not answer the author's question.
-
A-Sharabiani over 3 years@Medanko in what scope do you define
mapDispatchToProps
?