## 實例：計數器 下面我們來看一個最簡單的實例。 ~~~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); ~~~