## 实例：计数器 下面我们来看一个最简单的实例。 ~~~javascript const Counter = ({ value }) => ( <h1>{value}</h1> ); const render = () => { ReactDOM.render( <Counter value={store.getState()}/>, document.getElementById('root') ); }; store.subscribe(render); render(); ~~~ 上面是一个简单的计数器，唯一的作用就是把参数`value`的值，显示在网页上。Store 的监听函数设置为`render`，每次 State 的变化都会导致网页重新渲染。 下面加入一点变化，为`Counter`添加递增和递减的 Action。 ~~~javascript const Counter = ({ value, onIncrement, onDecrement }) => ( <div> <h1>{value}</h1> <button onClick={onIncrement}>+</button> <button onClick={onDecrement}>-</button> </div> ); const reducer = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } }; const store = createStore(reducer); const render = () => { ReactDOM.render( <Counter value={store.getState()} onIncrement={() => store.dispatch({type: 'INCREMENT'})} onDecrement={() => store.dispatch({type: 'DECREMENT'})} />, document.getElementById('root') ); }; render(); store.subscribe(render); ~~~