加入《React.js 小书》读者交流群,一起讨论、交流、学习前端技术。

React.js 小书

<-- 返回首页

使用真正的 Redux 和 React-redux

(本文未审核)

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

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

npm install redux react-redux --save

src/ 目录下 Header.jsThemeSwitch.jsContent.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,改成使用第三方模块 reduxcreateStoreProvider 本来从本地的 ./react-redux 引入,改成从第三方 react-redux 模块中引入。其余代码保持不变。

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

实例图片

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

课后练习


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




迄今为止最简单好用的在线思维导图工具

广告