现在 make-react-redux 工程代码中的 Redux 和 React-redux 都是我们自己写的,现在让我们来使用真正的官方版本的 Redux 和 React-redux。

在工程目录下使用 npm 安装 Redux 和 React-redux 模块:

  1. npm install redux react-redux --save

src/ 目录下 Header.jsThemeSwitch.jsContent.js 的模块导入中的:

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

改成:

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

也就是本来从本地 ./react-redux 导入的 connect 改成从第三方 react-redux 模块中导入。

修改 src/index.js,把前面部分的代码调整为:

  1. import React, { Component } from 'react'
  2. import ReactDOM from 'react-dom'
  3. import { createStore } from 'redux'
  4. import { Provider } from 'react-redux'
  5. import Header from './Header'
  6. import Content from './Content'
  7. import './index.css'
  8. const themeReducer = (state, action) => {
  9. if (!state) return {
  10. themeColor: 'red'
  11. }
  12. switch (action.type) {
  13. case 'CHANGE_COLOR':
  14. return { ...state, themeColor: action.themeColor }
  15. default:
  16. return state
  17. }
  18. }
  19. const store = createStore(themeReducer)
  20. ...

我们删除了自己写的 createStore,改成使用第三方模块 reduxcreateStoreProvider 本来从本地的 ./react-redux 引入,改成从第三方 react-redux 模块中引入。其余代码保持不变。

接着删除 src/react-redux.js,它的已经用处不大了。最后启动工程 npm start

实例图片

可以看到我们原来的业务代码其实都没有太多的改动,实际上我们实现的 reduxreact-redux 和官方版本在该场景的用法上是兼容的。接下来的章节我们都会使用官方版本的 reduxreact-redux

课后练习


因为第三方评论工具有问题,对本章节有任何疑问的朋友可以移步到 React.js 小书的论坛 发帖,我会回答大家的疑问。