react-redux

Posted 2021-01-17 xpz007

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react-redux相关的知识，希望对你有一定的参考价值。

<div class="article fmt article__content" data-id="1190000012976767" data-license="">

<h1 id="articleHeader0">前言</h1>
本文不会拿redux、react-redux等一些react的名词去讲解，然后把各自用法举例说明，这样其实对一些react新手或者不太熟悉redux模式的开发人员不够友好，他们并不知道这样使用的原因。本文通过一个简单的例子展开，一点点自己去实现一个redux+react-redux，让大家充分理解redux+react-redux出现的必要。
<h2 id="articleHeader1">预备知识</h2>
在阅读本文之前，希望大家对以下知识点能提前有所了解并且上好厕所（文章有点长）：
<ol>
<li>状态提升的概念</li>
<li>react高阶组件(函数)</li>
<li>es6基础</li>
<li>pure 组件(纯函数)</li>
<li>Dumb 组件</li>
</ol>
<h2 id="articleHeader2">React.js的context</h2>
这一节的内容其实是讲一个react当中一个你可能永远用不到的特性——context，但是它对你理解react-redux很有好处。那么context是干什么的呢？看下图： <img data-src="/img/bV2xty?w=909&h=622" src="https://static.segmentfault.com/v-5bdbfaa9/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"> 假设现在这个组件树代表的应用是用户可以自主换主题色的，每个子组件会根据主题色的不同调整自己的字体颜色。“主题色”这个状态是所有组件共享的状态，根据状态提升中所提到的，需要把这个状态提升到根节点的 Index 上，然后把这个状态通过 props 一层层传递下去： <img data-src="/img/bV2xt1?w=910&h=609" src="https://static.segmentfault.com/v-5bdbfaa9/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"> 如果要改变主题色，在 Index 上可以直接通过 this.setState({ themeColor: ‘red‘ }) 来进行。这样整颗组件树就会重新渲染，子组件也就可以根据重新传进来的 props.themeColor 来调整自己的颜色。
但这里的问题也是非常明显的，我们需要把 themeColor 这个状态一层层手动地从组件树顶层往下传，每层都需要写 props.themeColor。如果我们的组件树很层次很深的话，这样维护起来简直是灾难。
如果这颗组件树能够全局共享这个状态就好了，我们要的时候就去取这个状态，不用手动地传： <img data-src="/img/bV2xHa?w=780&h=596" src="https://static.segmentfault.com/v-5bdbfaa9/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"> 就像这样，Index 把 state.themeColor 放到某个地方，这个地方是每个 Index 的子组件都可以访问到的。当某个子组件需要的时候就直接去那个地方拿就好了，而不需要一层层地通过 props 来获取。不管组件树的层次有多深，任何一个组件都可以直接到这个公共的地方提取 themeColor 状态。
React.js 的 context 就是这么一个东西，某个组件只要往自己的 context 里面放了某些状态，这个组件之下的所有子组件都直接访问这个状态而不需要通过中间组件的传递。一个组件的 context 只有它的子组件能够访问。 下面我们看看 React.js 的 context 代码怎么写，我们先把整体的组件树搭建起来。 用create-react-app创建工程：
<div class="widget-codetool" style="display:none;">
<div class="widget-codetool--inner">



</div>
</div><pre class="hljs dsconfig"><code style="word-break: break-word; white-space: initial;">create-react-app react-redux-demo1</code></pre>
现在我们修改 App，让它往自己的 context 里面放一个 themeColor：
<div class="widget-codetool" style="display:none;">
<div class="widget-codetool--inner">

<span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import React, { Component } from ‘react‘;
import PropTypes from ‘prop-types‘;
import Header from ‘./header‘;
import Main from ‘./main‘;
import ‘./App.css‘;

class App extends Component {
static childContextTypes = {
themeColor :PropTypes.string
}
constructor () {
super()
this.state = {
themeColor : ‘red‘
}
}
getChildContext () {
return {
themeColor : this.state.themeColor
}
}
render () {
return (
<div>
<Header />
<Main />
</div>
)
}
}

export default App;" title="" data-original-title="复制">

</div>
</div><pre class="hljs javascript"><code>import React, { Component } from ‘react‘;
import PropTypes from ‘prop-types‘;
import Header from ‘./header‘;
import Main from ‘./main‘;
import ‘./App.css‘;

class App extends Component {
static childContextTypes = {
themeColor :PropTypes.string
}
constructor () {
super()
this.state = {
themeColor : ‘red‘
}
}
getChildContext () {
return {
themeColor : this.state.themeColor
}
}
render () {
return (
<div>
<Header />
<Main />
</div>
)
}
}

export default App;</code></pre>
构造函数里面的内容其实就很好理解，就是往 state 里面初始化一个 themeColor 状态。getChildContext 这个方法就是设置 context 的过程，它返回的对象就是 context（也就是上图中处于中间的方块），所有的子组件都可以访问到这个对象。我们用 this.state.themeColor 来设置了 context 里面的 themeColor。
接下来我们要看看子组件怎么获取这个状态，修改 App 的孙子组件 Title和Content：
<div class="widget-codetool" style="display:none;">
<div class="widget-codetool--inner">

<span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//title.js
class Title extends Component {
static contextTypes = {
themeColor: PropTypes.string
}

render () {
return (
<h1 style={{ color: this.context.themeColor }}>React.js 小书标题</h1>
)
}
}" title="" data-original-title="复制">

</div>
</div><pre class="hljs scala"><code>//title.js
class Title extends Component {
static contextTypes = {
themeColor: PropTypes.string
}

render () {
return (
<h1 style={{ color: this.context.themeColor }}>React.js 小书标题</h1>
)
}
}</code></pre>
<hr>
<div class="widget-codetool" style="display:none;">
<div class="widget-codetool--inner">

<span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//content.js
import React, { Component } from ‘react‘;
class Content extends Component {
render () {
return (
<div>
<h2>this is 内容</h2>
</div>
)
}
}

export default Content;" title="" data-original-title="复制">

</div>
</div><pre class="hljs scala"><code>//content.js
import React, { Component } from ‘react‘;
class Content extends Component {
render () {
return (
<div>
<h2>this is 内容</h2>
</div>
)
}
}

export default Content;</code></pre>
一个组件可以通过 getChildContext 方法返回一个对象，这个对象就是子树的 context，提供 context 的组件必须提供 childContextTypes 作为 context 的声明和验证。
如果一个组件设置了 context，那么它的子组件都可以直接访问到里面的内容，它就像这个组件为根的子树的全局变量。任意深度的子组件都可以通过 contextTypes 来声明你想要的 context 里面的哪些状态，然后可以通过 this.context 访问到那些状态。
context 打破了组件和组件之间通过 props 传递数据的规范，极大地增强了组件之间的耦合性。而且，就如全局变量一样，context 里面的数据能被随意接触就能被随意修改，每个组件都能够改 context 里面的内容会导致程序的运行不可预料。
<h2 id="articleHeader3">动手实现Redux</h2>
上节内容讲了React.js的content的特性，这个跟redux和react-redux什么关系呢？看下去就知道了，这边先卖个关子：）。Redux 和 React-redux 并不是同一个东西。Redux 是一种架构模式（Flux 架构的一种变种），它不关注你到底用什么库，你可以把它应用到 React 和 Vue，甚至跟 jQuery 结合都没有问题。而 React-redux 就是把 Redux 这种架构模式和 React.js 结合起来的一个库，就是 Redux 架构在 React.js 中的体现。这节主要讲如何自己手动实现一个redux模式。
<h3 id="articleHeader4">“大张旗鼓”的修改共享状态</h3>
用 create-react-app 新建一个项目：react-redux-demo2：
<div class="widget-codetool" style="display:none;">
<div class="widget-codetool--inner">



</div>
</div><pre class="hljs dsconfig"><code style="word-break: break-word; white-space: initial;">create-react-app react-redux-demo2</code></pre>
修改 public/index.html 里面的 body 结构为：
<div class="widget-codetool" style="display:none;">
<div class="widget-codetool--inner">


<div id=‘title‘></div>
<div id=‘content‘></div>
</body>" title="" data-original-title="复制">

</div>
</div><pre class="hljs xml"><code><body>
<div id=‘title‘></div>
<div id=‘content‘></div>
</body></code></pre>
删除 src/index.js 里面所有的代码，添加下面代码，代表我们应用的状态：
<div class="widget-codetool" style="display:none;">
<div class="widget-codetool--inner">

<span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="const appState = {
title: {
text: ‘this is title‘,
color: ‘red‘,
},
content: {
text: ‘this is content‘,
color: ‘blue‘
}
}" title="" data-original-title="复制">

</div>
</div><pre class="hljs processing"><code>const appState = {
title: {
text: ‘this is title‘,
color: ‘red‘,
},
content: {
text: ‘this is content‘,
color: ‘blue‘
}
}</code></pre>
我们新增几个渲染函数，它会把上面状态的数据渲染到页面上：
<div class="widget-codetool" style="display:none;">
<div class="widget-codetool--inner">

<span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="function renderApp (appState) {
renderTitle(appState.title)
renderContent(appState.content)
}

function renderTitle (title) {
const titleDOM = document.getElementById(‘title‘)
titleDOM.innerHTML = title.text
titleDOM.style.color = title.color
}

function renderContent (content) {
const contentDOM = document.getElementById(‘content‘)
contentDOM.innerHTML = content.text
contentDOM.style.color = content.color
}
renderApp(appState)" title="" data-original-title="复制">

</div>
</div><pre class="hljs maxima"><code>function renderApp (appState) {
renderTitle(appState.title)
renderContent(appState.content)
}

function renderTitle (title) {
const titleDOM = document.getElementById(‘title‘)
titleDOM.innerHTML = title.text
titleDOM.style.color = title.color
}

function stateChanger (state, action) {
switch (action.type) {
case ‘UPDATE_TITLE_TEXT‘:
state.title.text = action.text
break
case ‘UPDATE_TITLE_COLOR‘:
state.title.color = action.color
break
default:
break
}
}

const store = createStore(appState, stateChanger)

renderApp(store.getState()) // 首次渲染页面
store.dispatch({ type: ‘UPDATE_TITLE_TEXT‘, text: ‘this is dispatch‘ }) // 修改标题文本
store.dispatch({ type: ‘UPDATE_TITLE_COLOR‘, color: ‘blue‘ }) // 修改标题颜色
renderApp(store.getState()) // 把新的数据渲染到页面上" title="" data-original-title="复制">

</div>
</div><pre class="hljs stylus"><code>let appState = {
title: {
text: ‘this is title‘,
color: ‘red‘,
},
content: {
text: ‘this is content‘,
color: ‘blue‘
}
}

function stateChanger (state, action) {
switch (action.type) {
case ‘UPDATE_TITLE_TEXT‘:
state.title.text = action.text
break
case ‘UPDATE_TITLE_COLOR‘:
state.title.color = action.color
break
default:
break
}
}

const store = createStore(appState, stateChanger)

renderApp(store.getState()) // 首次渲染页面
store.dispatch({ type: ‘UPDATE_TITLE_TEXT‘, text: ‘this is dispatch‘ }) // 修改标题文本
store.dispatch({ type: ‘UPDATE_TITLE_COLOR‘, color: ‘blue‘ }) // 修改标题颜色
renderApp(store.getState()) // 把新的数据渲染到页面上</code></pre>
针对每个不同的 App，我们可以给 createStore 传入初始的数据 appState，和一个描述数据变化的函数 stateChanger，然后生成一个 store。需要修改数据的时候通过 store.dispatch，需要获取数据的时候通过 store.getState。
<h3 id="articleHeader6">监控数据变化</h3>
上面代码有个问题，就是每次dispatch修改数据的时候，其实只是数据发生了变化，如果我们不手动调用renderApp，页面不会发生变化。如何数据变化的时候程序能够智能一点地自动重新渲染数据，而不是手动调用？
往 dispatch里面加 renderApp 就好了，但是这样 createStore 就不够通用了。我们希望用一种通用的方式“监听”数据变化，然后重新渲染页面，这里要用到观察者模式。修改 createStore：
<div class="widget-codetool" style="display:none;">
<div class="widget-codetool--inner">

<span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="function createStore (state, stateChanger) {
const listeners = []
const subscribe = (listener) => listeners.push(listener)
const getState = () => state
const dispatch = (action) => {
stateChanger(state, action)
listeners.forEach((listener) => listener())
}
return { getState, dispatch, subscribe }
}" title="" data-original-title="复制">

</div>
</div><pre class="hljs pf"><code>function createStore (state, stateChanger) {
const listeners = []
const subscribe = (listener) => listeners.push(listener)
const getState = () => state
const dispatch = (action) => {
stateChanger(state, action)
listeners.forEach((listener) => listener())
}
return { getState, dispatch, subscribe }
}</code></pre>
我们在 createStore 里面定义了一个数组 listeners，还有一个新的方法 subscribe，可以通过 store.subscribe(listener) 的方式给 subscribe 传入一个监听函数，这个函数会被 push 到数组当中。每当 dispatch 的时候，监听函数就会被调用，这样我们就可以在每当数据变化时候进行重新渲染：
<div class="widget-codetool" style="display:none;">
<div class="widget-codetool--inner">

 renderApp(store.getState()))

renderApp(store.getState()) // 首次渲染页面
store.dispatch({ type: ‘UPDATE_TITLE_TEXT‘, text: ‘this is dispatch‘ }) // 修改标题文本
store.dispatch({ type: ‘UPDATE_TITLE_COLOR‘, color: ‘blue‘ }) // 修改标题颜色
// ...后面不管如何 store.dispatch，都不需要重新调用 renderApp" title="" data-original-title="复制">

</div>
</div><pre class="hljs typescript"><code>const store = createStore(appState, stateChanger)
store.subscribe(() => renderApp(store.getState()))

renderApp(store.getState()) // 首次渲染页面
store.dispatch({ type: ‘UPDATE_TITLE_TEXT‘, text: ‘this is dispatch‘ }) // 修改标题文本
store.dispatch({ type: ‘UPDATE_TITLE_COLOR‘, color: ‘blue‘ }) // 修改标题颜色
// ...后面不管如何 store.dispatch，都不需要重新调用 renderApp</code></pre>
<h3 id="articleHeader7">共享结构的对象来提高性能</h3>
其实我们之前的例子当中是有比较严重的性能问题的。我们在每个渲染函数的开头打一些 Log 看看：
<div class="widget-codetool" style="display:none;">
<div class="widget-codetool--inner">

<span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="function renderApp (appState) {
console.log(‘render app...‘)
renderTitle(appState.title)
renderContent(appState.content)
}

function renderTitle (title) {
console.log(‘render title...‘)
const titleDOM = document.getElementById(‘title‘)
titleDOM.innerHTML = title.text
titleDOM.style.color = title.color
}

function renderContent (content) {
console.log(‘render content...‘)
const contentDOM = document.getElementById(‘content‘)
contentDOM.innerHTML = content.text
contentDOM.style.color = content.color
}" title="" data-original-title="复制">

</div>
</div><pre class="hljs javascript"><code>function renderApp (appState) {
console.log(‘render app...‘)
renderTitle(appState.title)
renderContent(appState.content)
}

function renderTitle (title) {
console.log(‘render title...‘)
const titleDOM = document.getElementById(‘title‘)
titleDOM.innerHTML = title.text
titleDOM.style.color = title.color
}

function renderTitle (newTitle, oldTitle = {}) {
if (newTitle === oldTitle) return // 数据没有变化就不渲染了
console.log(‘render title...‘)
const titleDOM = document.getElementById(‘title‘)
titleDOM.innerHTML = newTitle.text
titleDOM.style.color = newTitle.color
}

function renderContent (newContent, oldContent = {}) {
if (newContent === oldContent) return // 数据没有变化就不渲染了
console.log(‘render content...‘)
const contentDOM = document.getElementById(‘content‘)
contentDOM.innerHTML = newContent.text
contentDOM.style.color = newContent.color
}" title="" data-original-title="复制">

</div>
</div><pre class="hljs haxe"><code> console.log(‘render app...‘)
renderTitle(newAppState.title, oldAppState.title)
renderContent(newAppState.content, oldAppState.content)
}

function renderTitle (newTitle, oldTitle = {}) {
if (newTitle === oldTitle) return // 数据没有变化就不渲染了
console.log(‘render title...‘)
const titleDOM = document.getElementById(‘title‘)
titleDOM.innerHTML = newTitle.text
titleDOM.style.color = newTitle.color
}

class Header extends Component {
render () {
return (
<h1>this is header</h1>
)
}
}

export default Header

//./src/Content.js
import React, { Component } from ‘react‘
import PropTypes from ‘prop-types‘
import ThemeSwitch from ‘./ThemeSwitch‘

class Content extends Component {
render () {
return (
<div>
this is content
<ThemeSwitch />
</div>
)
}
}

export default Content

//./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

//修改app.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 App extends Component {
render () {
return (
<div>
<Header />
<Content />
</div>
)
}
}

export default App" title="" data-original-title="复制">

</div>
</div><pre class="hljs javascript"><code>//./src/Header.js
import React, { Component } from ‘react‘
import PropTypes from ‘prop-types‘

class Header extends Component {
render () {
return (
<h1>this is header</h1>
)
}
}

export default Header

//./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>this is content</p>
<ThemeSwitch />
</div>
)
}
}

export default Content

//./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

//修改app.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‘

export default App</code></pre>
这样我们就简单地把整个组件树搭建起来了，用 npm start 启动工程，然后可以看到页面上显示： <img data-src="/img/bV2Be4?w=1012&h=502" src="/img/bV2Be4?w=1012&h=502" alt="clipboard.png" title="clipboard.png" style="cursor: pointer; display: inline;">
<h3 id="articleHeader11">结合 context 和 store</h3>
既然要把 store 和 context 结合起来，我们就先在 src目下创建store.js 和 reducer.js俩文件：
<div class="widget-codetool" style="display:none;">
<div class="widget-codetool--inner">

<span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//store.js
function createStore (reducer) {
let state = null
const listeners = []
const subscribe = (listener) => listeners.push(listener)
const getState = () => state
const dispatch = (action) => {
state = reducer(state, action)
listeners.forEach((listener) => listener())
}
dispatch({}) // 初始化 state
return { getState, dispatch, subscribe }
}

export default createStore

//reducer.js
const themeReducer = (state, action) => {
if (!state) return {
themeColor: ‘red‘
}
switch (action.type) {
case ‘CHANGE_COLOR‘:
return { ...state, themeColor: action.themeColor }
default:
return state
}
}
export default themeReducer" title="" data-original-title="复制">

</div>
</div><pre class="hljs pf"><code>//store.js
function createStore (reducer) {
let state = null
const listeners = []
const subscribe = (listener) => listeners.push(listener)
const getState = () => state
const dispatch = (action) => {
state = reducer(state, action)
listeners.forEach((listener) => listener())
}
dispatch({}) // 初始化 state
return { getState, dispatch, subscribe }
}

export default createStore

//reducer.js
const themeReducer = (state, action) => {
if (!state) return {
themeColor: ‘red‘
}
switch (action.type) {
case ‘CHANGE_COLOR‘:
return { ...state, themeColor: action.themeColor }
default:
return state
}
}
export default themeReducer</code></pre>
themeReducer 定义了一个表示主题色的状态 themeColor，并且规定了一种操作 CHNAGE_COLOR，只能通过这种操作修改颜色。现在我们把 store 放到 App 的 context 里面，这样每个子组件都可以获取到 store 了，修改 src/App.js 里面的 App：
<div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">

<span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import React, { Component } from ‘react‘
import PropTypes from ‘prop-types‘
import ReactDOM from ‘react-dom‘
import Header from ‘./Header‘
import Content from ‘./Content‘

import createStore from ‘./store‘
import themeReducer from ‘./reducer‘

const store = createStore(themeReducer)

class App extends Component {
static childContextTypes = {
store: PropTypes.object
}

getChildContext () {
return { store }
}

render () {
return (
<div>
<Header />
<Content />
</div>
)
}
}
export default App" title="" data-original-title="复制">

</div>
</div><pre class="hljs javascript"><code>import React, { Component } from ‘react‘
import PropTypes from ‘prop-types‘
import ReactDOM from ‘react-dom‘
import Header from ‘./Header‘
import Content from ‘./Content‘

import createStore from ‘./store‘
import themeReducer from ‘./reducer‘

const store = createStore(themeReducer)

getChildContext () {
return { store }
}

render () {
return (
<div>
<Header />
<Content />
</div>
)
}
}
export default App</code></pre>
然后修改 src/Header.js、Content.js、ThemeSwitch.js，让它从 App 的 context 里面获取 store，并且获取里面的 themeColor 状态来设置自己的颜色：
<div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">

<span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//header.js
class Header extends Component {
static contextTypes = {
store: PropTypes.object
}

constructor () {
super()
this.state = { themeColor: ‘‘ }
}