redux——阮一峰

Redux专门用于做状态管理的JS库。
Redux可以用来集中式管理react应用中多个组件共享的状态。
什么情况下需要使用redux?1.某个组件的状态，需要让其他组件可以随时拿到（共享）；2.一个组件需要改变另一个组件的状态（通信）；3.总体原则：能不用就不用，如果不用比较吃力才考虑使用。
Redux的设计思想就是：1.Web应用只是一个状态机，视图与状态是一一对应的；2.所有的状态都保存在一个对象中。
Store就是保存数据的地方，整个应用只能有一个Store。Redux提供createStore这个函数来生成Store。import { createStore } from 'redux'; const store = createStore(fn)createSotre函数接收另一个函数为参数返回新生成的Store对象。
State:如果想得到某个时点的数据，就要对Store生成快照。这种时点的数据集合就是State。当前时刻的State可以通过store.getState()拿到。一个State对应一个View。
Action是一个对象，是View发出的通知，表示State要发生变化了。【用户只能接触到View。】Action中的type属性是必须的，表示Action名称，是字符串，其他属性可以自由设置。
改变State的唯一办法就是用Action，它会运送数据到Store。
可以定义一个函数来生成Action，这个函数就是Action Creator。
store.dispatch()是View发出Action的唯一方法。store.dispatch接受一个Action对象作为参数，将它发送出去。
Store收到Action之后，必须给出一个新的State，这样View才会变化，这种State的计算过程叫做Reducer。Reducer是一个函数，接受Action和当前的State作为参数，返回一个新的State。
Reducer可以初始状态（只有1次）也可以加工状态（可多次）。第一次时，previousState是undefined。
在实际应用中，store.dispatch方法会触发Reducer的自动执行，因此Store需要知道Reducer函数：做法就是在生成Store时，将Reducer传入createStore方法。
最好把State对象设成只读，你没法改变它，要想得到新的State，唯一办法就是生成一个新对象，这样的好处是：在任何时候，与某个View对应的State总是一个不变的对象。
store.subscribe()方法设置监听函数，一旦State发生变化，就自动执行这个函数。store.subscribe方法返回一个函数，调用这个函数就可以解除监听。
在index.js中用监听函数监测redux中状态的改变，如果redux的状态发生了改变，那么就重新渲染App。否则视图层无法被重新渲染。
store.subscribe(()=>{ ReactDOM.render(<App/>,document.getElementById('root')) })
Reducer函数可以进行拆分，不同函数负责处理不同属性，最终把它们合并成一个大的Reducer即可。Redux提供了一个combineReducers方法，用于Reducer的拆分：你只要定义各个子Reducer函数，然后用这个方法，将它们合成一个大的Reducer【但是此时的子Reducer必须与State的属性名同名。

Redux的工作流程

首先用户发出Action。store.dispatch(action)
Store自动调用Reducer，传入两个参数：当前的State和收到的Action，Reducer会返回新的State。
let nextState = todoApp(previousState , action);
State一旦有变化，Store会调用监听函数，store.subscribe(listener)//调用监听函数listener可以通过store.getState()得到当前状态。如果使用的是React，这时可以触发重新渲染View
function listener(){ let newState = store.getState(); component.setState(newState): }

异步与中间件

中间件：是一个函数，对store.dispatch方法进行了改造，在发出Action和执行Reducer这两步之间，添加了其他功能。中间件只需要引用别人写好的模板即可。
中间件的用法；
import { applyMiddleware, createStore } from 'redux'; import createLogger from 'redux-logger'; const logger = createLogger()； const store = createStore( reducer, applyMiddleware(logger) );
上述代码中，redux-logger提供一个生成器createLogger，可以生成日志中间件logger。然后将logger放在applyMiddleware方法中，传入createStore方法，就完成了store.dispatch()的功能增强。【applyMiddleware可以作为createStore的第三个参数；中间件的次序有讲究】
applyMiddleware是Redux的原生方法，作用是将所有中间件组成一个数组chain，然后依次执行，最后执行store.dispatch。中间件内部可以拿到getState和dispatch这两个方法。
不同于同步操作只要发出一种Action，异步操作要发出三种Action：操作发起时的Action，操作成功时的Action，操作失败时的Action。
异步操作的思路是：
1.操作开始时，送出一个Action，触发State更新为”正在操作“状态，View重新渲染；
2.操作结束时，再送出一个Action，触发State更新为”操作结束“状态，View再一次重新渲染。
如果action是Object形式，叫做同步action;如果action是function形式，叫做异步action.

异步操作的第一种解决方案是：写出一个返回函数的Action Creator，然后用redux-thunk中间件改造store.dispatch，使其可以接受函数作为参数。另一种解决方案是让Action Creator返回一个Promise对象，redux-promise中间件改造store.dispatch，使其接受Promise对象作为参数。

redux——阮一峰相关推荐

中文技术文档的写作规范-转{阮一峰}
最近我们技术老大,让我自己写一份优秀的文档,我很少写这个,但是作为技术又不得不写,几经波折之后,找到了阮一峰大神的笔记,做了参考: 标题层级标题分为四级. 一级标题:文章的标题二级标题:文章主要 ...
阮一峰 react 系列教程
阮一峰 react 系列教程阮一峰 react 系列教程 ES6 语法:教程 Babel:教程 React:教程,示例库 Webpack:教程 React 项目脚手架:代码库 Flex 布局:教程, ...
react 阮一峰_【React】Hook 入门
其实大家直接看看阮一峰老师写的这篇文章就足够了,本人就是想把人家的内容再自己咀嚼一遍而已. React Hooks 入门教程www.ruanyifeng.com react 用过一段时间的人都知道, ...
linux 网络配置阮一峰,计算机是怎样启动的？ - 阮一峰的网络日志.pdf
阮一峰的网络日志 » 首页 » 档案分类: IT 技上一篇:纪录片 <TPB AFK 分类: IT 技上一篇:纪录片 <TPB AFK 术下一篇:玉门人家照相馆术下一篇:玉门人 ...
读阮一峰对《javascript语言精粹》的笔记，我有疑问。
<javascript语言精粹>是一本很棒的书籍,其中作者在附录列出了12种他所认为的javascript语言中的糟粕. 我最近开始跟读前端前辈的博客,其中读到了阮一峰的<12种不宜 ...
阮一峰在 GitHub 又一开源力作！
好消息! 阮一峰老师的又一力作 <bash脚本教程> 帮助你快速入门bash 程序员都应该掌握基本的bash脚本命令特别是做运维开发的,bash脚本是必备的基本技能要想驾驭服务端开发 ...
TF-IDF与余弦相似性的应用（一）：自动提取关键词 - 阮一峰的网络日志
TF-IDF与余弦相似性的应用(一):自动提取关键词 - 阮一峰的网络日志 TF-IDF与余弦相似性的应用(一):自动提取关键词作者: 阮一峰日期: 2013年3月15日这个标题看上去好像很复杂 ...
[转]阮一峰:蒙特卡罗方法入门
ametor 阮一峰:蒙特卡罗方法入门发表于2016/4/24 10:26:54 84人阅读分类: 算法作者: 阮一峰日期: 2015年7月27日本文通过五个例子,介绍蒙特卡罗方法(Mon ...
阮一峰网络日志第41期 2019年01月25日
http://www.ruanyifeng.com/blog/2019/01/weekly-issue-41.html 声明:链接及文章内容为原博主阮一峰原创. 转载于:https://www.cnb ...

redux——阮一峰

Redux的工作流程

异步与中间件

redux——阮一峰相关推荐

最新文章

热门文章