如何在反應中增加和減少狀態值？

Question

我試圖增加和發生反應，使用react-redux。我添加動作，容器，減速。但我不知道怎麼在這裏認購increment和decrement行動遞減狀態值是我的代碼

我想增加和減少值當按鈕

這裏用戶點擊是我的代碼 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

你需要做出很多改變

的

第一：既然你要連接你的第一個組成部分的狀態和行爲作爲AppContainer你需要使它在DOM

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

二：你是派遣行動INC和DEC和你正在處理INCREMENT ，DECREMENT in reducer

第三個：您應該呈現從redux獲得的狀態，而不是組件狀態，如

{this.props.digit} 

四：

呼叫通過像this.props.increment()道具的動作，this.props.decrement()

完整代碼

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