动手实现 Redux（一）：优雅地修改共享状态
从这节起我们开始学习 Redux，一种新型的前端“架构模式”。经常和 React.js 一并提出，你要用 React.js 基本都要伴随着 Redux 和 React.js 结合的库 React-redux。
要注意的是，Redux 和 React-redux 并不是同一个东西。Redux 是一种架构模式（Flux 架构的一种变种），它不关注你到底用什么库，你可以把它应用到 React 和 Vue，甚至跟 jQuery 结合都没有问题。而 React-redux 就是把 Redux 这种架构模式和 React.js 结合起来的一个库，就是 Redux 架构在 React.js 中的体现。
如果把 Redux 的用法重新介绍一遍那么这本书的价值就不大了，我大可把官网的 Reducers、Actions、Store 的用法、API、关系重复一遍，画几个图，说两句很玄乎的话。但是这样对大家理解和使用 Redux 都没什么好处，本书初衷还是跟开头所说的一样：希望大家对问题的根源有所了解，了解这些工具到底解决什么问题，怎么解决的。
现在让我们忘掉 React.js、Redux 这些词，从一个例子的代码 + 问题开始推演。
用 create-react-app 新建一个项目 make-redux，修改 public/index.html 里面的 body 结构为：
<body>
<div id='title'></div>
<div id='content'></div>
</body>
删除 src/index.js 里面所有的代码，添加下面代码，代表我们应用的状态：
const appState = {
title: {
text: 'React.js 小书',
color: 'red',
},
content: {
text: 'React.js 小书内容',
color: 'blue'
}
}
我们新增几个渲染函数，它会把上面状态的数据渲染到页面上：
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 会调用 rendeTitle 和 renderContent，而这两者会把 appState里面的数据通过原始的 DOM 操作更新到页面上，调用：
renderApp(appState)
你会在页面上看到：
这是一个很简单的 App，但是它存在一个重大的隐患，我们渲染数据的时候，使用的是一个共享状态 appState，每个人都可以修改它。如果我在渲染之前做了一系列其他操作：
loadDataFromServer()
doSomethingUnexpected()
doSomthingMore()
// ...
renderApp(appState)
renderApp(appState) 之前执行了一大堆函数操作，你根本不知道它们会对 appState做什么事情，renderApp(appState) 的结果根本没法得到保障。一个可以被不同模块任意修改共享的数据状态就是魔鬼，一旦数据可以任意修改，所有对共享状态的操作都是不可预料的（某个模块 appState.title = null 你一点意见都没有），出现问题的时候 debug 起来就非常困难，这就是老生常谈的尽量避免全局变量。
你可能会说我去看一下它们函数的实现就知道了它们修改了什么，在我们这个例子里面还算比较简单，但是真实项目当中的函数调用和数据初始化操作非常复杂，深层次的函数调用修改了状态是很难调试的。
但不同的模块（组件）之间确实需要共享数据，这些模块（组件）还可能需要修改这些共享数据，就像上一节的“主题色”状态（themeColor）。这里的矛盾就是：“模块（组件）之间需要共享数据”，和“数据可能被任意修改导致不可预料的结果”之间的矛盾。
让我们来想办法解决这个问题，我们可以学习 React.js 团队的做法，把事情搞复杂一些，提高数据修改的门槛：模块（组件）之间可以共享数据，也可以改数据。但是我们约定，这个数据并不能直接改，你只能执行某些我允许的某些修改，而且你修改的必须大张旗鼓地告诉我。
我们定义一个函数，叫 dispatch，它专门负责数据的修改：
function dispatch (action) {
switch (action.type) {
case 'UPDATE_TITLE_TEXT':
appState.title.text = action.text
break
case 'UPDATE_TITLE_COLOR':
appState.title.color = action.color
break
default:
break
}
}
所有对数据的操作必须通过 dispatch 函数。它接受一个参数 action，这个 action是一个普通的 JavaScript 对象，里面必须包含一个 type 字段来声明你到底想干什么。dispatch 在 swtich 里面会识别这个 type 字段，能够识别出来的操作才会执行对 appState 的修改。
上面的 dispatch 它只能识别两种操作，一种是 UPDATE_TITLE_TEXT 它会用 action的 text 字段去更新 appState.title.text；一种是 UPDATE_TITLE_COLOR，它会用 action 的 color 字段去更新 appState.title.color。可以看到，action 里面除了 type 字段是必须的以外，其他字段都是可以自定义的。
任何的模块如果想要修改 appState.title.text，必须大张旗鼓地调用 dispatch：
dispatch({ type: 'UPDATE_TITLE_TEXT', text: '《React.js 小书》' }) // 修改标题文本
dispatch({ type: 'UPDATE_TITLE_COLOR', color: 'blue' }) // 修改标题颜色
我们来看看有什么好处：
loadDataFromServer() // => 里面可能通过 dispatch 修改标题文本
doSomethingUnexpected()
doSomthingMore() // => 里面可能通过 dispatch 修改标题颜色
// ...
renderApp(appState)
我们不需要担心 renderApp(appState) 之前的那堆函数操作会干什么奇奇怪怪得事情，因为我们规定不能直接修改 appState，它们对 appState 的修改必须只能通过 dispatch。而我们看看 dispatch 的实现可以知道，你只能修改 title.text 和 title.color。
如果某个函数修改了 title.text 但是我并不想要它这么干，我需要 debug 出来是哪个函数修改了，我只需要在 dispatch的 switch 的第一个 case 内部打个断点就可以调试出来了。
原来模块（组件）修改共享数据是直接改的：
我们很难把控每一根指向 appState 的箭头，appState 里面的东西就无法把控。但现在我们必须通过一个“中间人” —— dispatch，所有的数据修改必须通过它，并且你必须用 action 来大声告诉它要修改什么，只有它允许的才能修改：
我们再也不用担心共享数据状态的修改的问题，我们只要把控了 dispatch，所有的对 appState 的修改就无所遁形，毕竟只有一根箭头指向 appState 了。
本节完整的代码如下：
let appState = {
title: {
text: 'React.js 小书',
color: 'red',
},
content: {
text: 'React.js 小书内容',
color: 'blue'
}
}
function dispatch (action) {
switch (action.type) {
case 'UPDATE_TITLE_TEXT':
appState.title.text = action.text
break
case 'UPDATE_TITLE_COLOR':
appState.title.color = action.color
break
default:
break
}
}
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) // 首次渲染页面
dispatch({ type: 'UPDATE_TITLE_TEXT', text: '《React.js 小书》' }) // 修改标题文本
dispatch({ type: 'UPDATE_TITLE_COLOR', color: 'blue' }) // 修改标题颜色
renderApp(appState) // 把新的数据渲染到页面上
下一节我们会把这种 dispatch 的模式抽离出来，让它变得更加通用。
下一节：动手实现 Redux（二）：抽离 store 和监控数据变化
动手实现 Redux（一）：优雅地修改共享状态的更多相关文章
- 动手实现 Redux（四）：共享结构的对象提高性能
接下来两节某些地方可能会稍微有一点点抽象,但是我会尽可能用简单的方式进行讲解.如果你觉得理解起来有点困难,可以把这几节多读多理解几遍,其实我们一路走来都是符合“逻辑”的,都是发现问题.思考问题.优化代 ...
- 动手实现 Redux（二）：抽离 store 和监控数据变化
上一节 的我们有了 appState 和 dispatch: let appState = { title: { text: 'React.js 小书', color: 'red', }, conte ...
- 动手实现 Redux（五）：不要问为什么的 reducer
经过了这么多节的优化,我们有了一个很通用的 createStore: function createStore (state, stateChanger) { const listeners = [] ...
- 动手实现 Redux（三）：纯函数（Pure Function）简介
我们接下来会继续优化我们的 createStore 的模式,让它使我们的应用程序获得更好的性能. 但在开始之前,我们先用一节的课程来介绍一下一个函数式编程里面非常重要的概念 —— 纯函数(Pure F ...
- 动手实现 Redux（六）：Redux 总结
不知不觉地,到这里大家不仅仅已经掌握了 Redux,而且还自己动手写了一个 Redux.我们从一个非常原始的代码开始,不停地在发现问题.解决问题.优化代码的过程中进行推演,最后把 Redux 模式自己 ...
- ZT 获得/修改共享互斥量属性:pthread_mutexattr_t
bbs.chinaunix.net/thread-965755-1-1.html 5. 获得/修改共享互斥量属性: #include<pthread.h> intpthre ...
- kettle_Spoon 修改共享DB连接带汉字引发的错误
win10下: kettle_Spoon 修改共享DB连接带汉字引发的错误: Unexpected problem reading shared objects from XML file : nul ...
- python--如何在线上环境优雅的修改配置文件?
1.如何在线上环境优雅的修改配置文件? 原配置文件 #原配置文件 global log 127.0.0.1 local2 daemon maxconn 256 log 127.0.0.1 local2 ...
- 你再也不用使用 Redux、Mobx、Flux 等状态管理了
Unstated Next readme 的中文翻译 前言 这个库的作者希望使用 React 内置 API ,直接实现状态管理的功能.看完这个库的说明后,没有想到代码可以这个玩.短短几行代码,仅仅使用 ...
随机推荐
- jquery1.9是最后支持IE678
bootstrap 需要 jquery 1.9.1或更高 jquery1.9是最后支持IE678
- AIM Tech Round (Div. 2) C. Graph and String
C. Graph and String time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- HDU4763 Theme Section —— KMP next数组
题目链接:https://vjudge.net/problem/HDU-4763 Theme Section Time Limit: 2000/1000 MS (Java/Others) Mem ...
- Oracle：sequence问题研究
一直以来,以为sequence是不间断地持续增长的:但今天发现sequence是会跳号,这种情况发生在RAC环境下.在单实例环境下,应该不存在的. sequence截图如下: 数据库表中发生了跳号: ...
- WAS：服务器停电后，重启DMGR，控制台访问不了
1. 今天有现场WAS服务器停电,重启DMGR后,控制台网页打不开: 后来得知,防火墙可能有问题.(虽然之前该机器上防火墙是关着的,但掉电后,防火墙会重启规则) 关掉防火墙后,问题解决. 2. ...
- java回调机制及其实现
1. 什么是回调函数 回调函数,顾名思义,用于回调的函数.回调函数只是一个功能片段,由用户按照回调函数调用约定来实现的一个函数.回调函数是一个工作流的一部分,由工作流来决定函数的调用(回调)时机.回调 ...
- Struts2访问Servlet API的几种方式
struts2提供了三种方式访问servlet API:大致分为两类 1. ActionContext: public static ActionContext getContext() :获得当前 ...
- PostgreSQL学习之【用户权限管理】说明
背景 最近在学习PostgreSQL,看了用户权限管理文档,涉及到的知识点比较多,顺便写篇文章进行整理并不定时更新,也方便自己后续进行查阅. 说明 注意:创建好用户(角色)之后需要连接的话,还需要修改 ...
- noip2010引水入城
https://www.zybuluo.com/ysner/note/1334997 这道题fst了 题面 戳我 解析 我一开始的想法是,按照高度给第一行排序,然后贪心地选取目前到不了的,高度最高的第 ...
- 【转】在IDEA中创建maven项目
原文地址: https://blog.csdn.net/zzy1078689276/article/details/78732183 现在的JavaWeb项目中,绝大多数都是采用的maven结构的项目 ...