亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

【九月打卡】第九天 【Redux 入門】實戰項目架構設計

標簽:
React

课程:React18 系统精讲

章节:redux

讲师:阿莱克斯刘

课程内容:


  1. what?

  • 实现全局数据共享

why

  • 组件间需要共享数据(state

  • 某个状态(state)需要在任何组件中使用

  • 谋个组件可以改变另一个组件状态(state)的时候

how

原理?

  • 剥离组件数据(state

  • 数据统一存放在store

  • 组件订阅store获取数据

  • store同步推送数据更新

即:redux统一保存数据,在隔离了数据与UI的同时,负责处理数据的绑定

  1. 工作流程?

  • store:有推送功能的仓库

  • reducerstore修改数据的方法,可以初始化、修改、删除store中的状态

  • action:数据更新的指令,告诉reducer如何处理数据

  1. 创建数据仓库store

  2. reducer同时初始化store

  3. UI组件同时会订阅store

  4. storeUI组件推送数据state,渲染UI

  5. UI组件修改数据:

    1. 组件向store仓库dispacth分发action指令

    2. action指令会以事件驱动的方式被store截获

    3. store将当前的数据state和指令action传给reducer

    4. reducer更新数据,并向storereturnstate

    5. store拿到新数据,向订阅者推送数据

    6. 组件拿到新数据,重新渲染UI

 


點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
Web前端工程師
手記
粉絲
0
獲贊與收藏
0

關注作者,訂閱最新文章

閱讀免費教程

  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消