1228-redux学习笔记(摘录) | WEB前端零基础课

今天的WEB零基础课的内容是Redux,它的思路比较“”,不怎么好理解,算是react里的一个难点。讲完之后,同学们纷纷表示没听懂,

这个东西只靠听,肯定是搞不懂的,还是要多写,通过多写去理解它的运行思路。

在我看来,redux的目的之一,就是把数据的传递从组件的层级上,剥离开。不使用redux时,组件的层级,其实是react数据的传递的通道。

要多写,否则没用。

<!-- 1228的redux学习笔记摘录 -->

redux [ri:'dʌks],是reactJs的状态管理。

它就是用来专门的管理react的数据传递的。

reactJs它就是dom的一个抽象层,它不是一个完整的webApp应用的解决方案。

它有二个方面没有处理:

1,代码结构的管理;

2,组件之间的通信;

redux,它出现的原因,我个人主观认为是第二个。

<!-- -->

如果你的UI层、页面交互很简单,没有很多层的页面,那用不着redux,

否则会增加不必要的复杂性;

如果没有,多用户之间的协作、跟服务器大量的交互,那用不着

redux的适用场景:多交互,多数据源

<!-- -->

Redux的设计思想比较简单:

1,web应用的就是一个状态机,视图与状态是一一对应;

2,所有的状态,保存在一个大对象里。它也是一个单独的东西,一般是单独的js文件。

<!-- Redux,它的基本的api: -->

所有的状态,保存在一个大对象里。

它叫做:Store

<!-- 创建一个Store,createStore() -->
import {createStore} from 'redux';
<!-- 返回新生成的一个Store对象 -->
const store = createStore(fn);
// fn,就是 reducers,
<!-- 获取初始状态:getState() -->

Store对象,它里面保存着当前应用的所有状态。

它里面的状态,State,

调用 getState()方法获取,

import {createStore} from 'redux'; //引入redux
const store = createStore(fn); //创建一个Store
let state = store.getState(); //获取它里面的状态

<!-- Action -->

Action,它是view(视图)发出的通知,表现State要发生变化。

Action,

它里面是一个对象,里面是属性和值,type属性是必须的,是名称,

let action = {
 type : '名称,其实就是引用',
 具体事情的名称: '要做什么事'
}

<!-- dispatch -->

dispatch,是store的方法。store.dispatch(),

import {createStore} from 'redux'; //引入redux
const store = createStore(fn); //创建一个Store
store.dispatch({
 type : '名称,其实就是引用',
 具体事情的名称: '要做什么事'
});

它接收一个action做为参数,发出Action

<!-- -->

Reducers [rɪ'dju:sə]

Reducers,它是一个“处理action要做的事情的地方”,

Reducers 收到state之后,要返回一个新的 state,

这个过程,叫做 Reducers [rɪ'dju:sə]

Reducers,是一个方法,接收二个参数

1,action;2、当前的state

返回的是一个新的 state,

// 伪代码:

let defalutstate = 0;
let reducer = ( state = defalutstate, action ) => {
 switch ( action.type ){
 case 'add':
 return state + action.addNum
 case 'mins':
 return 减法的内容
 defalut:
 return state
 }
}
let state = reducer( 1,{
 type : 'add',
 addNum : 2
});
// 此伪代码的返回值,应该是3

返回的新的state,它的值是3

从这个伪代码可以看出,它的计算,脱离了父子组件的传递。

redux的目的之一,就是把数据的传递从组件的层级上,剥离开。

之前我们的写法,组件的层级,其实是react数据的传递的通道。

<!-- store.subscribe(libs) -->

它用来监听函数,一但state发生变化,就自动执行。

这是什么?观察者模式

import {createStore} from 'redux'; //引入redux
const store = createStore(fn); //创建一个Store
...
..
.
store.subscribe( ReactDOM.render(...) );

重新渲染页面。

<!-- -->

Redux的工作流程:

1、发出action

<!-- store.dispatch(action) -->

2、store自动调用 reducers,并传入二个参数,

-当前state

-收到的action,

它会返回新的state

3、state一但发生变化,就自动 调用 store.subscribe(listen);

4、listen要通过 getState()得到更新之后的state,

调用render,重新渲染页面。

<!-- -->

reactJs,它的思路跟 jquery 完全不同。

redux,它的思路,跟reactJs,不说完全不同,相差也很大。

<!-- -->

redux,不是reactJs自带的。需要通过npm安装,

npm install redux -save

原文发布于微信公众号 - web前端教室(webfeel)

原文发表时间:2017-12-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Seebug漏洞平台

HCTF2017 部分 Web 出题思路详解

作者:LoRexxar'@知道创宇404实验室 11月12日结束的HCTF2017,我总共出了其中4道题目,这4道题目涵盖了我这半年来接触的很多有趣的东西。下面...

31840
来自专栏平凡文摘

Intellij IDEA 那些隐藏好用的小技巧

20840
来自专栏微信公众号:Java团长

Intellij IDEA神器那些让人爱不释手的小技巧

之前写了一篇介绍IntellIJ IDEA的文章,主要是列出一些平时大家可能没用过或者没怎么用,但是又非常好用的IntellIJ IDEA小技巧。由于篇幅原因,...

9020
来自专栏小狼的世界

Firebug Command Line 的使用技巧

Commandlinie是Firebug中总有用的一个特性。如果你有Microsoft Visual Studio的使用经验,你就会知道“Immediate W...

12030
来自专栏落影的专栏

iOS开发笔记(六)

前言 专注、坚持,是优良的品格。 正文 1、cell和cell.contentView 的区别 在给UITableViewCell添加视图的时候,我们有以下两种...

34550
来自专栏程序猿DD

Intellij IDEA神器那些让人爱不释手的14种小技巧,统统告诉你!

来源:https://blog.csdn.net/linsongbin1/article/details/80560332

8440
来自专栏java思维导图

Intellij IDEA神器那些让人爱不释手的14种小技巧,统统告诉你!

来源:https://blog.csdn.net/linsongbin1/article/details/80560332

10850
来自专栏carven

koa+socket.io尝试简单的web动作同步

尝试用过browser-sync辅助开发的前端同学,大概都会感到神奇:在多个端打开网页,网页的动作却是完全同步的。

12300
来自专栏数据星河

如何对第一个Vue.js组件进行单元测试 (下)

       让我们来写首个测试。我们首先需要使用shallowMount手动挂载我们的组件,并将其存储在我们将执行断言的变量中。我们还可以通过propsDat...

17600
来自专栏Java成神之路

js_调试_01_14 个你可能不知道的 JavaScript 调试技巧

了解你的工具在完成任务时有很重要的意义。 尽管 JavaScript 是出了名的难以调试,但是如果你掌握了一些小技巧,错误和 bug 解决起来就会快多了。

13130

扫码关注云+社区

领取腾讯云代金券