Simple counter app.State is changing as expected when button clicked ,which I can track in redux dev tools.However I cant access the count redux state from the counter component.What am I doing wrong exactly?
import React,{useState} from 'react'
import { connect } from 'react-redux';
import addone from '../actions/addone';
const Counter = ({addone,count}) => {
console.log(count);
return (
<div>
<h1>Value:{count}</h1>
<button type="button" onClick={()=>addone()}>Add 1</button>
</div>
)
}
const mapStateToProps = (state) => ({
count:state.count
});
export default connect(mapStateToProps, { addone })(Counter);
output nothing is shown after value.
you need to use useSelector hook in functional components i edited your code:
import React,{useState} from 'react';
import { useSelector} from 'react-redux';
import addone from '../actions/addone';
const Counter = () => {
const count = useSelector((state) => state.count);
console.log(count);
return (
<div>
<h1>Value:{count}</h1>
<button type="button" onClick={()=>addone()}>Add 1</button>
</div>
)
}