動手實現 React-redux（一）：初始化工程

能夠看到 Redux 並不複雜，它那些看起來匪夷所思的設定其實都是爲了解決特定的問題而存在的，咱們把問題想清楚之後就不難理解它的那些奇怪的設定了。這節開始咱們來看看如何把 Redux 和 React.js 結合起來，你會發現其實它們也並不複雜。

回顧一下，咱們在 前端應用狀態管理 —— 狀態提高 中提過，前端中應用的狀態存在的問題：一個狀態可能被多個組件依賴或者影響，而 React.js 並無提供好的解決方案，咱們只能把狀態提高到依賴或者影響這個狀態的全部組件的公共父組件上，咱們把這種行爲叫作狀態提高。可是需求不停變化，共享狀態沒完沒了地提高也不是辦法。

後來咱們在 React.js 的 context 中提出，咱們可用把共享狀態放到父組件的 context 上，這個父組件下全部的組件均可以從 context 中直接獲取到狀態而不須要一層層地進行傳遞了。可是直接從 context 裏面存放、獲取數據加強了組件的耦合性；而且全部組件均可以修改 context 裏面的狀態就像誰均可以修改共享狀態同樣，致使程序運行的不可預料。

既然這樣，爲何不把 context 和 store 結合起來？畢竟 store 的數據不是誰都能修改，而是約定只能經過 dispatch 來進行修改，這樣的話每一個組件既能夠去 context 裏面獲取 store 從而獲取狀態，又不用擔憂它們亂改數據了。

聽起來不錯，咱們動手試一下。咱們仍是拿「主題色」這個例子作講解，假設咱們如今須要作下面這樣的組件樹：

Header 和 Content 的組件的文本內容會隨着主題色的變化而變化，而 Content 下的子組件 ThemeSwitch 有兩個按鈕，能夠切換紅色和藍色兩種主題，按鈕的顏色也會隨着主題色的變化而變化。

用 create-react-app 新建一個工程，而後安裝一個 React 提供的第三方庫 prop-types：

npm install --save prop-types

安裝好後在 src/ 目錄下新增三個文件：Header.js、Content.js、ThemeSwitch.js。

修改 src/Header.js：

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class Header extends Component {
  render () {
    return (
      <h1>React.js 小書</h1>
    )
  }
}

export default Header

修改 src/ThemeSwitch.js：

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class ThemeSwitch extends Component {
  render () {
    return (
      <div>
        <button>Red</button>
        <button>Blue</button>
      </div>
    )
  }
}

export default ThemeSwitch

修改 src/Content.js：

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import ThemeSwitch from './ThemeSwitch'

class Content extends Component {
  render () {
    return (
      <div>
        <p>React.js 小書內容</p>
        <ThemeSwitch />
      </div>
    )
  }
}

export default Content

修改 src/index.js：

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import ReactDOM from 'react-dom'
import Header from './Header'
import Content from './Content'
import './index.css'

class Index extends Component {
  render () {
    return (
      <div>
        <Header />
        <Content />
      </div>
    )
  }
}

ReactDOM.render(
  <Index />,
  document.getElementById('root')
)

這樣咱們就簡單地把整個組件樹搭建起來了，用 npm start 啓動工程，而後能夠看到頁面上顯示：

固然如今文本都沒有顏色，並且點擊按鈕也不會有什麼反應，咱們尚未加入表示主題色的狀態和相關的業務邏輯，下一節咱們就把相關的邏輯加進去。

下一節：動手實現 React-redux（二）：結合 context 和 store

上一節：動手實現 Redux（六）：Redux 總結