Wie erhöht oder dekrementiert man den Statuswert in react?

Question

Ich versuche Zustandswert zu erhöhen und verringern in reagieren mit react-redux .Ich Aktionen hinzufügen, Behälter, Druckminderer .Aber ich weiß nicht, wie die increment und decrement Aktion hier abonnieren ist mein Code

Ich möchte erhöhen und verringern den Wert, wenn der Benutzer klicken Sie auf Tasten

hier mein 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

Sie brauchen eine Menge Änderungen vornehmen

Erstens: Da Sie Ihre erste Komponente Zustand und Aktionen wie AppContainer verbinden, müssen Sie es in DOM

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

Zweite zu machen: Sie sind Dispatching Aktionen INC und DEC und Sie sind Handling INCREMENT , DECREMENT in Minderer

Dritte: Sie sollten den Zustand, den Sie von redux bekommen machen und nicht die Komponente Zustand wie

{this.props.digit} 

Vierte:

Aufruf der Aktion über die Requisiten wie this.props.increment(), this.props.decrement()

Code Complete

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