如何在反应中增加和减少状态值?
问题描述:
我试图增加和发生反应,使用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'))
答
你需要做出很多改变
的第一:既然你要连接你的第一个组成部分的状态和行为作为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'))
我不'First'和'third'清楚了吗? – user5711656
为什么要渲染“集装箱” ......所以,如果我有两个组成部分'(一级,二级)'各有独立的容器('AppContainer1','AppContainer2')..所以我会在加渲染方法的容器?或只有组件? – user5711656
第三点是明确的..我只有在“第一”点 – user5711656