React+Redux學習筆記：React+Redux簡易開發步驟

前言

React+Redux 分爲兩部分：

1. 1. UI組件：即React組件，也叫用戶自定義UI組件，用於渲染DOM
   2. 容器組件：即Redux邏輯，處理數據和業務邏輯，支持全部Redux API，參考以前的文章：Redux學習筆記：Redux簡易開發步驟
      
      

而React+Redux是以上兩部分結合起來，方便在React中使用Redux，專用庫爲React-Redux.js。
React-Redux.js新增了一些新方法：

1. 1. Provider：容器跟組件，可直接把外部的state傳遞給全部子組件和UI組件；
   2. mapStateToProps：輸入邏輯，把外部的state轉化爲props對象傳遞給用戶自定義UI組件；
   3. mapDispatchToProps：輸出邏輯，根據用戶的操做，處理具體Action，並經過dispatch觸發更新state；
   4. connect：根據UI組件、輸入邏輯、輸出邏輯生成容器組件；

源代碼

本文實例源代碼參考：React-Redux-Primary-Demo 中的webapp/redux/index2.js。

演示地址：React-Redux實例演示

具體開發步驟

1.建立主文件js，好比index.js

2.定義Render入口，即容器組件

    ReactDOM.render(
      <Provider store={store}>
        <App />
      </Provider>,
      document.getElementById('root')
    )

說明：<Provider>是包裹在全部容器外面的根組件，目的是能夠直接傳遞state給全部子組件。（利用React組件的context,可參考：React組件實現越級傳遞屬性）

3.connect根據UI組件生成容器組件，並定義輸入（mapStateToProps）、輸出（mapDispatchToProps）邏輯

    const App = connect(
      mapStateToProps,
      mapDispatchToProps
    )(Counter)

說明：connect將用戶自定義的UI組件（即Counter）和React-Redux自動生成的容器組件（即App）連起來，目的是：前者負責UI展現，後者負責邏輯處理。

4.定義用戶自定義UI組件，即React Component

    class Counter extends Component {
      render() {
        const { value, onIncreaseClick } = this.props
        return (
          <div>
            <span>{value}</span>
            <button onClick={onIncreaseClick}>累加一次</button>
          </div>
        )
      }
    }

5.定義輸入輸出邏輯

    // 輸入邏輯：
    //    將state映射成props傳遞給UI組件（即Counter組件）
    function mapStateToProps(state) {
      return {
        value: state.count
      }
    }

    // 輸出邏輯：
    //    將用戶對UI組件的操做映射成Action，經過dispatch，觸發reducer（即conter），生成新的state
    function mapDispatchToProps(dispatch) {
      return {
        onIncreaseClick: () => dispatch({ type: 'increase' })
      }
    }

6.建立store，並綁定reducer

const store = createStore(counter); // createStore的第一個參數必須是個函數，mapDispatchToProps中執行dispatch()時，該函數就叫reducer

7.定義Reducer，生成新的state

    function counter(state = { count: 0 }, action) {
      const count = state.count
      switch (action.type) {
        case 'increase':
          return { count: count + 1 }
        default:
          return state
      }
    }

說明：state生成以後，會自動觸發mapStateToProps，並渲染View，不須要subscribe監聽state變化。