使用真正的 Redux 和 React-redux

如今 make-react-redux 工程代碼中的 Redux 和 React-redux 都是咱們本身寫的，如今讓咱們來使用真正的官方版本的 Redux 和 React-redux。

在工程目錄下使用 npm 安裝 Redux 和 React-redux 模塊：

npm install redux react-redux --save

把 src/ 目錄下 Header.js、ThemeSwitch.js、Content.js 的模塊導入中的：

import { connect } from './react-redux'

改爲：

import { connect } from 'react-redux'

也就是原本從本地 ./react-redux 導入的 connect 改爲從第三方 react-redux 模塊中導入。

修改 src/index.js，把前面部分的代碼調整爲：

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import Header from './Header'
import Content from './Content'
import './index.css'

const themeReducer = (state, action) => {
  if (!state) return {
    themeColor: 'red'
  }
  switch (action.type) {
    case 'CHANGE_COLOR':
      return { ...state, themeColor: action.themeColor }
    default:
      return state
  }
}

const store = createStore(themeReducer)

...

咱們刪除了本身寫的 createStore，改爲使用第三方模塊 redux 的 createStore；Provider 原本從本地的 ./react-redux 引入，改爲從第三方 react-redux 模塊中引入。其他代碼保持不變。

接着刪除 src/react-redux.js，它的已經用處不大了。最後啓動工程 npm start：

能夠看到咱們原來的業務代碼其實都沒有太多的改動，實際上咱們實現的 redux 和 react-redux 和官方版本在該場景的用法上是兼容的。接下來的章節咱們都會使用官方版本的 redux 和 react-redux。

下一節：Smart 組件 vs Dumb 組件

上一節：動手實現 React-redux（六）：React-redux 總結