我想实现用简单的终极版计数器组成部分,创造了store
使用createStore
和使用store.dispatch
简单终极版Counter组件实现
完整代码:
/*==================================================
This is only to format the code, I have used this editor,
you can scroll down for the fiddle having error.
==================================================*/
const createStore = Redux.createStore;
const counter = (state = {
counter: 0
}, action) => {
console.log('counter', state)
switch (action.type) {
case 'INCREMENT':
return state.counter + 1;
case 'DECREMENT':
return state.counter - 1;
default:
return state;
}
}
const store = createStore(counter);
let Counter = React.createClass({
getInitialState() {
return store.getState()
},
incrementCounter() {
store.dispatch({
type: 'INCREMENT'
});
},
decrementCounter() {
store.dispatch({
type: 'DECREMENT'
});
},
render() {
console.log('NEW STATE:', store.getState(), this.state)
return (
<div>
<p>{this.state.counter}</p>
<div>
<button onClick={this.incrementCounter}>+</button>
<button onClick={this.decrementCounter}>-</button>
</div>
</div>
)
}
})
ReactDOM.render(< Counter/> , document.getElementById('container'))
我的问题:我是不是能够得到在渲染块更新储值当我点击incrementCounter
和decrementCounter
功能
注:请与我裸露,我是新来的终极版。
作为亚历山大已经在这里做,你也减速需要使用Object.assign因为它是返回一个整数(新计数)而不是定义为初始状态的状态对象,例如{counter:1}。 –
@ alexander-t,感谢您的帮助。我真的很感激你是否也可以给我一个'Provider'的例子。请........ –
@RAVI MONE看看我的更新... –