Flux思想、异步thunk、 Generator | 8月更文挑战

这是我参与8月更文应战的第7天,活动概略检查:8月更文应战

Flux 思维

数据的单项活动,仰赖MVVM方式

Flux思维、异步thunk、 Generator | 8月更文应战

action creator

创造熊猫的,叫做panda crwebpack功用优化eator

创造小狗的,叫做dog creator

比方http 500下面的箭头函数便是一个actio变量是什么意思n creator

() => ({“type” : “ADD”})

总结:action creator是个函数,回来Ahttp 302ction

connect装修器中运用action creator

exp变量的界说ort dwebpack5efault connect(
({counterReducer}) => ({
v : counterReducer.v
}),
{
add(){
return {"type" : "ADD"}
},
minus(){
return {浏览器下载"type" : "MINUS"}
}
}
)(App)

add()和minus()的键 都是Ac变量类型有哪些tion creator,罗列一个个回来Action的函数。

创建counterAction变量类型有哪些.js 文件

babel250免费观看Babel暴露两个action creator:

export const add = () => ({"t变量之间的联络ype" :webpack打包原理 "ADD"});
export const minus = () => ({"type" : "MINUS"});

组件只需求引入 counterAction.js文件,并修正connect函数

export dewebpack打包fault con变量nect(
({counte浏览器的前史rRed浏览器前史上的痕迹在哪里ucer}) => ({
v : countwebpack5erReducer.v
}bababel巴别塔bel电影),
{
add,
minus
}webpack常用的loader和plugin
)(App)

bindA变量类型有哪些ctionCreators 绑定action creator

调用 需求运用 命名空间

import React from 'rewebpack打包优化act';
impWebpackort { conn浏览器前史记载为何不能webpack5ect } from "http 404react-redux"babel电影;
import * as counter变量泵Actions from "./actions/counterActions";
import {bindAction变量名的命名规矩Creators} from "redux";
class App ehttps和http的差异xtend变量前进s React.Component变量英文{
constructor(){
super();浏览器查找前史在哪
}
render(){
return(
<div&gwe浏览器查找前史在哪bpack打包原理t;
<h1>{this.pro变量是什么意思ps.v}</h1>
<button onClick={()=>babel巴别塔{webpack5
this.pro浏览器的前史ps.counterActions.add();
}}>按我+</butthttp://www.baidu.comon>
<but变量泵ton onClick={() => {
this.props.counterActions.m变量英文inus()webpack打包原理;
}}>按我-</button>
</div>
)
}
}
export default connect(
({count浏览器前史记录为何不能删erReducer}) =浏览器怎样翻开链接> ({
v : counterReducer.vwebpackhttp署理是什么东西
}),
(dispatch) => ({
counterAcwebpack装备tions: bindActionCreato变量是什么意思rs(counterActions , dispatch)
})
)(App)

异步

redux-th浏览器怎样翻babel韩剧开网站unk

thunk是办法转化程序的意思

设备依托

npm install --save redux-thwebpack功能优化unk

设备thwebpack是什么东西unk之后,aWebpackction文件中就能够写 两个括号了,如下

export const addAfter2000ms = () =&gthttp协议; () => {}webpack打包流程
export const addAfter2000mshttpwatch = () => (dispatch) => {}

第二个括号中体系附送 dispahttp://192.168.1.1登录tch变量名的命名规矩

总结
1)thunk是http://www.baidu.com一个语法webpack打包优化转化程序,webpack打包流程装了之后,能够在achttp署理tion文件中写() => () => {}办法
2)异步真实在a变量的界说ction文件中实施
3)坚持了组件文件的美丽、规整
4)reducer中不额定增加if分支浏览器哪个好

as变量yncbabellf 和 redux-thunk结合运用

import axios from 'axios';
const GETDATAh浏览器前史上的痕迹在哪里ttps和htt变量的界说p的差异 = "GETDATA"
const getData = (url:anhttpwatchy, valu变量提高e:any) => async (dispatch:a浏览器前史记录设置ny) => {
let results = await axios.post(url, value,变量类型有哪些 {
h变量是什么意思eaders: {
'Content-Type': 'applihttps和http的差异cation/x-www-form-urlencoded'
}
})
.t浏览器查找前史在哪hen(res => res.dat变量英文a.data)
.caHTTPtch(error => {
console.log(errobabel韩剧r);
})webpack是什么东西;
dispatch(fetchData(results));
}
const fetch变量的界说Data = (results:any) => ({type: GETDAT变量名的命名规矩A, results})
export {
getData
}

redux-saga

saga是英语“传奇”的意思。它的思维是“阻挠”。

官网:redux-saga.js.org/

redux-saga的大体进程如下:image

设备依托

npm install --save redux-saga

需求我们弥补babel的插件。babel要想处理加星函数、Promise等,必需求装babel-plugin-transform-http协议runtime。

npm install --save-dev babel-pbabel什么意思lu浏览器查找前史在哪gin-变量是什么意思transfo浏览器的前史rm-runtime

修正webpack.configbabelmap.js: 找到这一行: 增加一个插件 transform-babel韩剧runtime

plugins: ['transform-object-rest-spread','transform-runtime']

创建saga.jwhttp://192.168.1.1登录ebpack打包流程s

export const helloSaga = fun变量提高ction* () {
console.log('我是saga,你好!')
}

函数有变量之间的联络一个星,叫做产生器

修正main.js 进口文件 参考手册re变量是什么意思dux-saga.js.org/docs/introd…

总结:
1)组件、actio变量名的命名规矩n、reduhttp协议cer文件都坚持了办法上的美感,没有损坏代码规整性。没有两个()的action,坚持了高度的规整性;
2)实在结束异步在saga文件中,而thunk是action文件。
3)saga的思路是阻挠。thunk的思路是“办法转化”,让异步的action写两个圆括http协议号。因为saga的思路好,所以它“易于插拔”,感觉“在外部”办理整个事务逻辑,是一个独立的部分。
4)saga结束之后,毕竟的产品是babellf一次put,标明转发action。

Pbabel韩剧romise

同步函数的特征

  1. 函数有必要全部句子实施结束浏览器下载,再实施后边的句子
  2. 函数变量是什么意思体内用return回来值
  3. 函数调用时,等号左面用变量接纳

异步函数的特征:

  1. 异步函数变量类型有哪些变量提高会先之后后边的句子,等后边句子清空(同步栈http://浏览器查找前史在哪192.168.1.1登录实施结束)、异步也做完了,实施回调函数;
  2. 函数体内没有return这个词语,有babel韩剧必要用回调函数来回来值;
  3. 函数调用的时分,不能写等号,不能用变量来接纳值,有必要用回调函数来接手值。

变量泵一个异步函数,2000ms回来一个随机数

function getNumberAf浏览器前史上的痕迹在哪里ter2000ms(cb){
setTimeout(function(){
cb(Math.random());
},2000);
}
getNumberAfter2000ms(function(a){
console.log(a);
});
console.log("你好");babel250免费观看

回调黑洞(callback hell)

调用3次getNumberAfter2000ms 用6babel原理s得到3个数

getNumberbabel原理After2000ms(functiWebpackon(a){
console.log(a);
getNumberAfter2000ms(function (b) {
cowebpack打包流程nsole.log(b);
getNumberAfter2000ms(babelmap浏览器捆绑拜访网站function (c) {
console.log(c);
});
});
});

知道Promise

  • Promisehttp 500浏览器捆绑拜访网站webpachttp://192.168.1.1登录k5ES6babellf中供给的http 404一个语法糖,能够简化异webpack装备步函数的书写变量与函数
  • 是ES6供给的内置浏览器怎样翻开链接变量构函数

封装一个Promise

写一个异步webpack是什babel塔么东西函数,函http://www.baidu.com数回来Promise实例,webpack打包流程而Promi变量前进se实例圆心上有then办法

整体结构

function getNumb变量之间的联络erAfter2000ms(){
return new Prom浏览器ise();
}
getNuwebpack是什么东西mberAfter2000ms().webpack打包原理then();

实例化Promisehttps和http的差异的时分,有必要传入一个函数 (resolve,reject)=>{}。形参resolve标明成功,rej浏览器捆绑拜访网站ect标明失利。 resolve便是http 500成功时分回调,Webpack由then里面传入。

function getNumberAfter2000ms(){
return new Promise((resolve , reject) =&babelmapgt; {
setTimeout(fu浏览器怎样翻开链接nction(){
resolve(M变量泵athwebpack是什么东西.random());
},2Webpack000);
})http://www.baidu.com;
}
getNumberAfter2000ms().then(function(a){
console.log(awebpack面试题);
});

此刻就能够链式调用一个异步函数,就不需求运用 毁掉黑洞了。

getNumberAfter2000ms()
.then(funct变量min表明什么类型的变量ion(a){
console.log(a);
return getNumbe浏览器前史上的痕迹在哪里rAfter2webpack打包流程000ms();
})
.then(functBabelionwebpack打包原理 (httpclienta) {
console.log(a);
return getNumberAftewebpack是什么东西r2000ms();
})
.then(function (a)babelala33 {
console.log(a);
rebabel250免费观看turn getNumberAfter2000ms();
});

自己封装一个 promise 函数

class Chen浏览器捆绑拜访网站babel250免费观看gNuo{
constructor(fn){
this.fn = fn;
}
then(cb)变量泵{
this.fn(cb)
}
}
function getAf变量min表明什么类型的变量ter2s(){
rhttp 302eturn new ChengNuo((resolve,reject) =webpack是什么东西> {
setTimeout(fbabelala33unction(webp浏览器前史上的痕迹在哪里ack5){
resolve(Matbabel韩剧h.random())
},1000)
})
}
getAfter2s().then(function(b){
chttp://www.baidu.comonsole.log(b);
return getAfter2s()
})

fetch()函数 —webpack装备兼容性差

标明 “央求、得到”的意思。天然生成回来 Promose的实例

原生fetch 用的不是XMLHttpRequhttp 302est政策,即 fet浏览器查找前史在哪ch不是ajax。

axios

浏览器前史记录设置用: 运用XML变量名的命名规矩HttpRequest政策,模拟了Promise的语法,和fetch语法相同。HTTP 设备依bwebpack打包流程abel电影托:

npm install --浏览器前史上的痕迹在哪里savewebpack装备 axiobabelmaps

运用办法:

import ababelmapxiobabellfs from "axios";
function* addServer() {
const {m} = yield axios.get("/api/sh浏览器哪个好u").thebabel巴别塔n(data=>data.data浏览器前史记载为何不能删);
yield put({ "type": "AD变量之间的联络D" , m})Babel;
}

async / await

ES7中供给了浏览器查找前史在哪async/浏览器捆绑拜访网站await,能够写同步函数的写法变量调用异步函数。

async 只babel韩剧能加在function关键字的前面,不能加在箭头函数之http://www.baidu.com前。

funHTTPction getNumberAfhttp署理ter2000ms(){
return new Promise((resolvH变量的界说TTPe , reject)webpack面试题 =&httpwatchgt; {
setTimeout(function(){
resolve(Math.random());
},2000);
});
}
async functiwebpack打包优化on main(){
const a = await getNumberAfter2000ms().then(datHTTPa => data);
console.log(a)变量之间的联络;
const b = await getNumberAfter2000ms().then(浏览器前史上的痕迹在哪里data => data);
console.lohttp://192.168.1.httpclient1登录g(b);
const c = await getNumberAfter2000ms().thebabehttp 404l韩剧n(data => data);
console.log(c);
}
main();

asynbabel巴别塔c的函数里面webpack打包,能够用await标明句子。await后边有必要跟babel韩剧着一个回来Promise实例的函数thbabel什么意思en方babel韩剧法的实施,then的函数回来值,将被主动被await左面的变量接纳(这是c++Bahttp 302bel浏览器http 500底层封装)

await标明等候,它将等候这httpbabelala33 404个异步函数实施完变量类型有哪些毕。

Generator 加星浏览器怎样翻开链接函数

ES8推出的,非常新,Generator叫做产生器,库打断点的函数,能够有多个回来值的函数浏览器下载

比方

function* gen(){
console.log("哈哈");
yield "A变量提高";浏览器
console.l变量类型有哪些og("嘻嘻");
yield "B";
consolehttps和http的差异.log(HTTP"么变量类型有哪些么哒");
yield "C";
}
vwebpack打包流程ar I = gen(); //激活这个加星函数
I.next()     //输http协议出哈哈变量之间的联络
I.next()     //输出嘻嘻
I.nex浏览器t()      //输出么么哒

yibabel什么意思eld标明“产出浏览器的前史”,便是函数的断http协议点。

gen()函数能够http署理让虚拟“游标”就位,在 function* 下一行就位。此刻i就可变量是什么意思以调webpack打包流程用next()办法,标明实施函数到最近的yield。

yield后边的值,也能够被看见

consol浏览器e.log(g.next().value);           //输出A

加星函数和Promise分配可谓完美。

function getNumberAfter2000ms(http署理){
rwebpack打包原理eturn nhttp://www.baidu.comew Prombabel韩剧ise((resolve) =webpack常用的loader和plugin> {
setTimeout(functWebpackion(){
resolve(Math.random())
},2000);
});
}
function* gen(){
yielwebpack装备d getNumberAfter2000ms();
yield getNumberAfter2000ms();
yie变量ld getbabel塔NumberAfter2webpack功能优化000ms();
}
var i = gen();  //激活,预备游标
i.nextwebpack是什么东西().value
.then(data=>{
console.log(datahttpclwebpack面试题ient);
retuHTTPrn i.浏览器下载nextbabel塔().value;
})
.then(data => {
consolwebpack面试题e.log(data);
return i.nexbabel250免费观看t().浏览器前史记录设置value;
})
.then(data => {
console.log(data);
})

封装一个delay函数

functionhttp 302 delay(time){
return n变量min表明什么类型的变量ew Prombabel韩剧iwebpack功用优化se((resolve)=>{
setTimeout(funcwebpack装备tion()babel塔{
resolve()
},babel电影time)
})
}
funchttp 302tion* gen(){
yield delay(2000)
yield M浏览器捆绑拜访网站ath.random(变量前进)
}

感谢

谢谢各位在百忙之中点开这篇http署理文章,期望对你们能有所协助,如有问题欢迎各位大佬纠正。

假如觉webpack功用优化得写得还行的话,那就点个赞吧。

发表评论

提供最优质的资源集合

立即查看 了解详情