深入剖析redux原理 ,并自己手动实现,小伙又学会一项技能

话不多说 先说下redux流程 然后直接上代码
redux 主要是状态管理工具
在redux中想要修改状态 就需要去dispatch(action) 触发 reducer 根据action 的不同 返回不同状态的state
同时触发subscribe的注册的回调函数 获取最新的state状态,通过redux中的createStore api 即可实现上述功能 直接上代码了 代码中会有详细的注释 帮助大家理解 如果对大家有帮助,别忘了一键三连哦 !多谢多谢!

function createStore() {
  let state   //保存状态
  let listenes=[] // subscribe 可能有多个回调 ,该数组用于保存多个回调

//subscribe保存回调
function subscribe (callback) {
  listeners.push(callback)  //通过数组方法保存
}
//dispatch 触发回调
function dispatch (action){
  state =reducer(state,action)// 首先派发anction 调用reducer 返回新状态后再进行 subcribe回调函数的执行
  for (let i=0;i<listeners.length;i++) {  //遍历回调函数数组
    const listener =listenes[i]
    listener()
  }
}
function getState () {//在回调函数中获取最新状态
  return state
}
const store ={ //因为createStore最终会返回store实例 所以需要包裹下
  subscribe,
  dispatch,
  getState
}
return store;
}

// subscribe  dispath  getState

这样一个简易的createStore qpi就实现了
上述其实是对createStore api的封装 其中集成了 redux的核心执行顺序 规则 以及返回值,相信大家看到这里都会对redux 有了新的认识

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值