动手实现 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 总结