how to increment and decrement state value in react? - reactjs

Question

I am trying to increment and decrement state value in react using react-redux.I add actions , container ,reducer .But I don't know how to subscribe the increment and decrement action here is my code
I want to increment and decrement the value when user click on buttons
here is my code
http://codepen.io/anon/pen/jVjMXv?editors=1010
const abc= (state=0,action) => {
console.log(action.type)
switch(action.type){
case 'INCREMENT':
return state +1
case 'DECREMENT':
return state -1
Default :
return state;
}
}
const {createStore,bindActionCreators} =Redux;
const {Provider,connect} =ReactRedux;
const store = createStore(abc);
class First extends React.Component {
constructor (){
super();
this.state ={
digit :0
}
}
inc (){
console.log('ince')
}
dec (){
console.log('dec')
}
render(){
return (
<div>
<button onClick={this.inc.bind(this)}>INCREMENT</button>
<p>{this.state.digit}</p>
<button onClick={this.dec.bind(this)}>DECREMENT</button>
</div>
)
}
}
const actions = {
increment: () => {
return {
type: 'INCREMENT',
}
},
decrement: () => {
return {
type: 'DECREMENT',
}
}
};
const AppContainer = connect(
function mapStateToProps(state) {
return {
digit: state
};
},
function mapDispatchToProps(dispatch) {
return bindActionCreators(actions, dispatch);
}
)(First);
ReactDOM.render(
<Provider store={store}>
<First/>
</Provider>
,document.getElementById('root'))

Answer 1

You need to make a lot of changes
First: Since you are connecting your First component to state and actions as AppContainer you need to render it in DOM
ReactDOM.render(
<Provider store={store}>
<AppContainer/>
</Provider>
,document.getElementById('root'))
Second: you are dispatching actions INC and DEC and you are handling INCREMENT, DECREMENT in reducer
Third: You should render the state you get from redux and not the component state like
{this.props.digit}
Fourth:
call the action via the props like this.props.increment(), this.props.decrement()
Complete Code
const abc= (state=0,action) => {
console.log('in redux', action.type)
switch(action.type){
case 'INC':
return state +1
case 'DEC':
return state -1
default :
return state;
}
}
const {createStore,bindActionCreators} =Redux;
const {Provider,connect} =ReactRedux;
const store = createStore(abc);
class First extends React.Component {
constructor (props){
super(props);
this.state ={
digit :0
}
}
inc (){
console.log('ince', this.props)
this.props.increment();
}
dec (){
console.log('dec')
this.props.decrement();
}
render(){
return (
<div>
<button onClick={this.inc.bind(this)}>INCREMENT</button>
<p>{this.props.digit}</p>
<button onClick={this.dec.bind(this)}>DECREMENT</button>
</div>
)
}
}
const actions = {
increment: () => {
return {
type: 'INC',
}
},
decrement: () => {
return {
type: 'DEC',
}
}
};
const AppContainer = connect(
function mapStateToProps(state) {
return {
digit: state
};
},
function mapDispatchToProps(dispatch) {
return bindActionCreators(actions, dispatch);
}
)(First);
ReactDOM.render(
<Provider store={store}>
<AppContainer/>
</Provider>
,document.getElementById('root'))
Here is a working codepen

Answer 2

Very simple code INC and DEC: props and state
Complete Code:
class APP extends Component
{
constructor(props)
{
super(props)
this.state ={
digit: 0
}
this.onIncrement = this.onIncrement.bind(this);
this.onDecrement = this.onDecrement.bind(this);
}
onIncrement()
{
this.setState({
digit: this.state.digit + 1
)}
}
onDecrement()
{
this.setState({
digit: this.state.digit - 1
)}
}
render()
{
return(<p>{this.state.digit}</p>
<button type="button" onClick={this.onIncrement}> + </button>
<button type="button" onClick={this.onDecrement}> - </button>)
}
}
export default APP;