comment incrémenter et décrémenter une valeur d'état dans react ?

Question

J'essaie d'incrémenter et de décrémenter la valeur de l'état dans react en utilisant react-redux J'ai ajouté des actions, un conteneur et un réducteur, mais je ne sais pas comment souscrire à l'action. increment y decrement action voici mon code

Je veux incrémenter et décrémenter la valeur lorsque l'utilisateur clique sur les boutons.

voici mon 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

Vous devez faire beaucoup de changements

D'abord : Puisque vous connectez votre premier composant à l'état et aux actions comme AppContainer, vous devez le rendre dans le DOM.

ReactDOM.render(
   <Provider store={store}>
    <AppContainer/>
  </Provider>
  ,document.getElementById('root'))

Deuxièmement : vous distribuez des actions INC y DEC et vous vous occupez INCREMENT , DECREMENT dans le réducteur

Troisièmement : Vous devez rendre l'état que vous obtenez de redux et non l'état du composant comme.

{this.props.digit}

Quatrièmement :

appeler l'action via les props comme this.props.increment() , this.props.decrement()

Code complet

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'))

Voici un codepen fonctionnel

Answer 2

Code très simple INC et DEC : props et état

Code complet :

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>)
    }
}

exporter APP par défaut ;