# 一個簡單的計數器開始 首先為了理清一些概念，先寫一個小Demo進行說明。 `index.js` ```js import React, { Component } from 'react' import ReactDOM from 'react-dom' import PropTypes from 'prop-types' import { createStore } from 'redux' const reducers = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } }; const store = createStore(reducers) const rootEl = document.getElementById('root') class Counter extends Component{ constructor (props) { super(props); this.increment = this.increment.bind(this); this.decrement = this.decrement.bind(this); } increment () { const { onIncrement } = this.props onIncrement() } decrement () { const { onDecrement } = this.props onDecrement() } render () { const { value } = this.props return ( <p> Count: {value} <br/> {' '} <button onClick={this.increment}> + </button> {' '} <button onClick={this.decrement}> - </button> </p> ) } } Counter.propTypes = { value: PropTypes.number.isRequired, onIncrement: PropTypes.func.isRequired, onDecrement: PropTypes.func.isRequired } const render = () => ReactDOM.render( <Counter value={store.getState()} onIncrement={() => store.dispatch({ type: 'INCREMENT' })} onDecrement={() => store.dispatch({ type: 'DECREMENT' })} />, rootEl ) render() store.subscribe(render) ``` 運行效果如下: :-:  可以看到效果為點擊 +/- 對應的 Count 數值也對應增加。 當然這只是一個很簡單的例子，只是為了說明一些問題，實際應用中比這復雜得多。 ## 基本概念 一個 Redux 應用程序包括以下幾個部分: ### Store Store 是一個數據存儲池，用于保存View中的一些狀態。 比如上述案例中的: ```js import { createStore } from 'redux' import reducers from './reducers' const store = createStore(reducers) ``` 創建了一個數據存儲池 store，后面章節詳細介紹。 ### State Store對象包含所有數據。如果想得到某個時點的數據，就要對 Store 生成快照。這種時點的數據集合，就叫做 State。 State 是view中的具體狀態，使用 `store.getState()` 獲取狀態值，一個state只對應一個view。 比如上述案例中的: ```js <Counter value={store.getState()} /> ``` 將state傳遞給 Counter 組件，在組件中使用 `props.value` 接收。 ### Action Action 是把數據從應用傳到 store 的有效載荷。它是 store 數據的唯一來源。一般來說會通過 store.dispatch() 將 action 傳到 store。 比如上述案例中的: ```js onIncrement={() => store.dispatch({ type: 'INCREMENT' })} onDecrement={() => store.dispatch({ type: 'DECREMENT' })} ``` 提交一個type為 `DECREMENT` 的Action以改變state 在上例中的 `reducers` 方法，接收兩個參數，一個是 state 的狀態，另一個參數叫 action，使用一個 type 屬性區別 action 的具體行為。 ### Reducer Reducer 是具體指定 Action 將如何改變 State 狀態的一個方法，接收上一個狀態的狀態值 previousState 和一個 action，返回新的狀態值 newState。 比如上述案例中定義的的 `reducers` 函數，這個方法就是 reducer。 ```js const reducers = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } }; ```