following is the code that i used in order to manage the state but unfortunately my state is not updating when using redux
the action is as given below:
export let incNumber = ()=>{
return {
type: 'INCREMENT'
}
}
export let decNumber = ()=>{
return {
type: 'DECREMENT'
}
}
while the reducer is as given below:
import mainReducer from "./reducers";
import { createStore } from "redux";
const store = createStore(mainReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
export default store;
the main app.js file is as given below:
import './App.css';
import {useSelector, useDispatch} from 'react-redux';
import {incNumber, decNumber} from './actions/index';
function App() {
let myState = useSelector((state)=> {
return state.changeTheNumber;
});
console.log(myState);
const dispatch = useDispatch();
return (
<>
<div className="main-div">
<div className="container">
<h1>Increment/Decrement counter</h1>
<h4>using React and Redux</h4>
<div className="quantity">
<a className="quantity__minus" title="Decrement" onClick={()=>dispatch(decNumber())}><span>-</span></a>
<input name="quantity" type="text" className="quantity__input" defaultValue={myState}/>
<h1>{myState}</h1>
<a className="quantity__plus" title="Increment" onClick={()=>dispatch(incNumber())}><span>+</span></a>
</div>
</div>
</div>
</>
);
}
export default App;
now the problem is that although as soon as i click on + button, the updated value is being shown on console in the browser but is not updated in the field specified. Any solutions?
