redux之createStore方法底层封装模拟
首先在看代码之前让我们一起回顾下redux的思想吧 首先redux就是一个MVC思想的框架,他总体是遵循数据的单向流动自顶向下流动
在我们仓库中有一个initState用来存储着我们的初始数据 另外还有个actions这个用来进行一些变量的改变和传递 也就是MVC结构中的C---控制层
另外里面的reducer是对应着MVC中M层 用来进行逻辑的处理 注意这里的逻辑处理不能操作UI逻辑也就是直接控制视图的变量
当我们用户想要改变数据的时候必须触动actions让其去操作reducer然后进行数据的改变,而不能让用户直接去操作我们state中的数据
获取数据的时候也是同理 不能让其对数据库直接操作
先介绍下redux的使用 代码如下
//引入redux中创建仓库的方法 import {createStore,combineReducers} from "redux"; const initState={
num:0
} let reducer=(state=initState,action)=>{ switch (action.type) {
case "BIG":
state=action.data
return state; default:
return state;
}
} const reducers=combineReducers({reducer}) const store=createStore(reducers);
export default store;
这是仓库的一些写法,而我们使用的时候 引入store 直接 调用下面这个方法
以上介绍的是redux中的使用,下面是模拟这个效果进行的封装
class Flux{
constructor(opj){
//将接受到的这个对象挂载到这个class实例上
Object.assign(this,opj)
this.arr=[]
}
getState(attr){
//这里接受到的这个attr是让用户想取哪个值
//这个方法是暴露给仓库的一个获取仓库数据的方法
if(attr){
return this.reducer(this.state,{})[attr]
}else{
return this.reducer(this.state,{})
}
}
dispatch(actionType){
//这里接受到的是一个对象
//console.log(this.state,"封装的方法")
//将最新的state获取出来保存起来 然后下次再调用getState方法的话就不会
//在读取默认值了
this.state=this.reducer(this.state,actionType) //当用户修改值得时候我们每次发布一下
this.promulgator("storeChange")
}
subscriber(cb){
//订阅者 将订阅函数储存在事件队列中
this.arr.push(cb)
}
promulgator(){
//发布者 触发订阅者中的函数
this.arr.forEach(cb=>{
cb()
})
}
} export default Flux;
看完上述的方法不知道大家有没有发现什么问题
在外面其实可以通过实例访问到里面state和reducer 既然能够访问到那么就证明使用者可以不通过我们规定的方法去直接修改数值
这样就与我们封装的数据单向流动 每次用户想要改变数据必须通过actions找到对应的reducer去修改的初衷了,所以我们需要对其进行一些
改正 让调用这个方法的时候只能通过我们暴露给用户的方法去改变,而不应该有其他的接口存在
具体改正如下
let state=Symbol("state") //因为我们不能将this上暴露出state 不然用户可以访问到 所以这里要用到Symbol class Flux{
constructor(opj){
//将接受到的这个对象挂载到这个class实例上
//Object.assign(this,opj)
//不能用Object.assign的原因是因为state不能暴露在这个实例上
//防止用户的修改 this.reducer=opj.reducer;
this[state]=opj.state this.arr=[]
}
getState(attr){
//这里接受到的这个attr是让用户想取哪个值
//这个方法是暴露给仓库的一个获取仓库数据的方法
if(attr){ return this.reducer(this[state],{})[attr]
}else{
//加三个点的作用是让用户只读不能改
//还有一个方法 Object.getOwnPropertyDescriptor(this.state)
//里面某个属性设置成false就不能改了 return {...this.reducer(this[state],{})}
}
}
dispatch(actionType){
//这里接受到的是一个对象
//console.log(this.state,"封装的方法")
//将最新的state获取出来保存起来 然后下次再调用getState方法的话就不会
//在读取默认值了
this[state]=this.reducer(this[state],actionType) //当用户修改值得时候我们每次发布一下
this.promulgator()
//这个发布订阅的作用是为了防止数据改变用户得不到 也就是将视图和用户连接起来
}
subscriber(cb){
//订阅者 将订阅函数储存在事件队列中
this.arr.push(cb)
}
promulgator(){
//发布者 触发订阅者中的函数
this.arr.forEach(cb=>{
cb()
})
}
} export default Flux;
具体使用方法如下 基本同redux一样
import Store from "../tool/index" let initState={
num:1
} export let actions= {
addNum(text){
return {
type:"ADDNUM",
text
}
}
} let reducer=(state=initState,action)=>{
switch (action.type) {
case "ADDNUM":{
let num=state.num+1 return {...state,...{num}}
}
default: return {...state};
}
} //引入我们封装的flux框架 然后将reducer传入 并且将action传入 //注意这里接受的是对象
export default new Store({
reducer,
state:initState
})
redux之createStore方法底层封装模拟的更多相关文章
- redux中createStore方法的默认参数
一般使用方法: createStore(reducer, applyMiddleware(thunk)) 传递默认参数: createStore(reducer, defaultState, appl ...
- Redux状态管理方法与实例
状态管理是目前构建单页应用中不可或缺的一环,也是值得花时间学习的知识点.React官方推荐我们使用Redux来管理我们的React应用,同时也提供了Redux的文档来供我们学习,中文版地址为http: ...
- 【类库】私房干货.Net数据层方法的封装
[类库]私房干货.Net数据层方法的封装 作者:白宁超 时间:2016年3月5日22:51:47 摘要:继上篇<Oracle手边常用70则脚本知识汇总>文章的发表,引起很多朋友关注.便促使 ...
- 【SSM 7】Mybatis底层封装思路
一.基本概述 在前面的博客中介绍到Mybatis的逆向生成工具,为我们生成了每个实体的基本增删改查的代码,那么每个实体都是那么多的代码,我们很容易的发现,有很大的相似性.对于这部分代码,应该予以抽象封 ...
- ASP.NET底层封装HttpModule实例---FormsAuthentication类的分析
HttpModule是用来注册HttpApplication事件的,实现IHttpModule接口的托管代码模块可以访问该请求管道的所有事件.那么对于我们最常用的ASP.NET Forms身份验证模块 ...
- Android+appium +python 点击坐标tap方法的封装
当常使用的查找点击元素的方法name.id.classname等无法使用时,我们将会采取坐标的点击来实现操作,同样存在一个问题,当手机的分辨率.屏幕大小不一致时,坐标的定位也会不同,因此将采用相对坐标 ...
- react中界面跳转 A界面跳B界面,返回A界面,A界面状态保持不变 redux的state方法
在上一篇文章中说过了react中界面A跳到B,返回A,A界面状态保持不变,上篇中使用的是传统的localStorage方法,现在来使用第二种redux的state方法来实现这个功能 现在我刚接触red ...
- Redux的createStore实现
Redux的createStore实现 使用过react的同学应该对Redux这个东西有所了解.他是一种全局状态管理的思想(对, 这里我觉得它是一种思想, 因为对于React来说, 其实Redux ...
- ArrayList类中的contains()方法底层依赖的是equals()方法
ArrayList类中的contains()方法底层依赖的是equals()方法.若集合中的元素是自定义对象,则应该重写该类父类Object的equals()方法,否则对象永远都不相同(因为都是new ...
随机推荐
- 【arc077f】AtCoder Regular Contest 074 F - Lotus Leaves
题意 给定一个n*m的池塘,每个格子上可能有叶子. 从一个叶子出发,可以跳到相同行或相同列的叶子. 问至少去掉多少叶子,使得起点不能到达终点. \(n,m<=100\) 解法 很显然的最小割模型 ...
- jQ-点击查看更多
<style type="text/css"> .hi { width: 200px; height: 18vw; background-color: pink; fo ...
- Python实例 复制文件
import shutil import os import os.path src = " d:\\download\\test\\myfile1.txt " dst = ...
- [翻译] MaxMind DB 文件格式规范
MaxMind DB 文件格式规范来源:http://maxmind.github.io/MaxMind-DB/翻译:御风(TX:965551582)2017-03-23 -------------- ...
- POJ 2031 Building a Space Station (prim裸题)
Description You are a member of the space station engineering team, and are assigned a task in the c ...
- 【CODEVS】2618 核电站问题
2618 核电站问题 时间限制: 1 s 空间限制: 32000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description 一个核电站有N个放核物质的坑,坑排列在一条直 ...
- 极简bootstrap file 美化样式(无需第三方插件)
原本的file上传表单非常的丑,但是又不想使用第三方插件,Bootstrap也没有相关的美化,于是用纯CSS完成,美化,JS实现功能,连BootStrap都不需要,十分简单 1.给原版丑表单隐藏了di ...
- oracle 控制结构
1.if 逻辑结构 if/then 结构是最简单的条件测试,如果条件为真,则执行程序的一行或者多行,如果条件为假,则什么都不执行, 示例: if 1>2 then null; end if ; ...
- gb2312的6763个汉字
0a啊阿埃挨哎唉哀皑癌蔼矮艾碍爱隘鞍氨安俺按暗岸胺案肮昂盎凹敖熬翱袄傲奥懊澳芭捌扒叭吧笆八疤巴拔跋靶把耙坝霸罢爸白柏百摆佰败拜稗斑班搬扳般颁板版扮拌伴瓣半办绊邦帮梆榜膀绑棒磅蚌镑傍谤苞胞包褒剥薄雹保堡 ...
- GDOI2017第二轮模拟day1 总结
平民比赛 这场比赛的暴力分非常友好. 但是我并没有拿到全部的暴力分. 1(暴力分\(60/100\)) 暂时我可以拿的暴力分为\(30/100\),直接mst模拟即可. 然而当时打了个辣鸡莫队,结果爆 ...