如何在反应中增加和减少状态值？

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

你需要做很多改变

First: 由于您将 First 组件作为 AppContainer 连接到状态和操作，因此您需要在 DOM

中呈现它

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

第二个：您正在调度操作 INC 和 DEC 并且您正在处理 INCREMENT、DECREMENT 中的减速器

第三：你应该渲染你从 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

Answer 2

非常简单的代码 INC 和 DEC：props 和 state

完整代码：

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

导出默认APP；

如何在反应中增加和减少状态值？

how to increment and decrement state value in react?

reactjs

react-router

redux

react-redux