国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

react開發(fā)教程（九）redux基礎(chǔ)

muzhuyu / 2653人閱讀

摘要：案例代碼定義計(jì)算規(guī)則，即個(gè)商品價(jià)值戀人結(jié)算完成，當(dāng)前購(gòu)物車為空單身狗根據(jù)計(jì)算規(guī)則生成定義數(shù)據(jù)即變化之后的派發(fā)規(guī)則觸發(fā)數(shù)據(jù)變化上一篇開發(fā)教程八組件通信下一篇開發(fā)教程十結(jié)合

Readux基礎(chǔ) 什么是redux？ 
簡(jiǎn)單點(diǎn)回答就是，一個(gè)管理數(shù)據(jù)的全局對(duì)象，但是它有單一狀態(tài)樹的概念，所謂的單一狀態(tài)樹，就是指“所有的 state都以一個(gè)對(duì)象樹的形式儲(chǔ)存在一個(gè)單一的 store 中。”


頁(yè)面中的所有狀態(tài)或者數(shù)據(jù)，都應(yīng)該用這種狀態(tài)樹的形式來描述；頁(yè)面上的任何變化，都應(yīng)該先去改變這個(gè)狀態(tài)樹，然后再通過某種方式實(shí)現(xiàn)到頁(yè)面上。


或者換句話說，我們要做的核心工作，就是用單個(gè)對(duì)象去描述頁(yè)面的狀態(tài)，然后通過改變這個(gè)對(duì)象來操控頁(yè)面。
使用場(chǎng)景

無論是移動(dòng)端還是 pc 端，當(dāng)你使用 React 或者 vue 開發(fā)組件化的 SPA 程序時(shí)組件之間共享數(shù)據(jù)（狀態(tài)）共享本身就是一個(gè)問題，既然是共享的那么就沒有必要在每個(gè)組件中都重新獲取，因此每個(gè)系統(tǒng)都需要一個(gè)管理多組件使用的公共信息的功能，這就是 Redux 的作用。

核心概念

Action：是把數(shù)據(jù)從應(yīng)用傳到 store 的有效載荷，通俗一點(diǎn)就是描述一個(gè)動(dòng)作
比如：
你的女朋友給你發(fā)了個(gè)消息，消息的內(nèi)容就是，"快去給我清空購(gòu)物車"， 那么這個(gè)內(nèi)容在redux中就是action的意思

Reducer：Action 只是描述了有事情發(fā)生了這一事實(shí)，并沒有指明應(yīng)用如何更新 state。而這正是 reducer 要做的事情。 一般稱其為規(guī)則
比如：
你女朋友已經(jīng)給你發(fā)完消息了，但是只是一個(gè)消息，你是執(zhí)行者，你是怎么執(zhí)行的他不關(guān)心，那么你執(zhí)行的這個(gè)過程就是reducer，為什么叫規(guī)則那，因?yàn)槟銏?zhí)行的這個(gè)過程本就是規(guī)則，你先得有錢，然后登錄他的帳號(hào)，然后結(jié)算

Store：Store 就是把 Reducer 和 action 聯(lián)系到一起的對(duì)象。
Store 有以下職責(zé)：
維持應(yīng)用的 state；
提供 getState() 方法獲取 state；
提供 dispatch(action) 方法更新 state；
通過 subscribe(listener) 注冊(cè)監(jiān)聽器；

安裝

如果單純使用 Redux 僅僅安裝 Redux 即可，執(zhí)行npm install redux --save，不過在 React 中使用 Redux 肯定會(huì)用到 react-redux 這一工具，因此這里一起安裝完，執(zhí)行npm install react-redux --save。

案例代碼 
// 定義計(jì)算規(guī)則，即 reducer
function BoyFriend(state = {
  cart: "10個(gè)商品價(jià)值100000000",
  relationship: "戀人"
}, action) {
  switch (action.type) {
    case "JIEZHANG":
      state.cart = "結(jié)算完成，當(dāng)前購(gòu)物車為空"
      return state
    case "FENSHOU":
      state.relationship = "單身狗"
      return state
    default:
      return state
  }
}

// 根據(jù)計(jì)算規(guī)則生成 store
let store = createStore(BoyFriend)

// 定義數(shù)據(jù)（即 state）變化之后的派發(fā)規(guī)則
store.subscribe(() => {
  console.log("current state", store.getState())
})

// 觸發(fā)數(shù)據(jù)變化
store.dispatch({ type: "JIEZHANG" })
store.dispatch({ type: "JIEZHANG" })
store.dispatch({ type: "FENSHOU" })

上一篇：react開發(fā)教程（八）React組件通信
下一篇：react開發(fā)教程（十）redux結(jié)合react

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/90163.html

相關(guān)文章

  • react開發(fā)教程（十）redux結(jié)合react

    摘要：描述和之間沒有關(guān)系。但是還是比較適合和搭配的，因?yàn)樵试S你以的形式來描述界面，而非常擅長(zhǎng)控制的變化。應(yīng)用中應(yīng)有且僅有一個(gè)。只需要在渲染根組件時(shí)使用即可。創(chuàng)建上一篇開發(fā)教程九基礎(chǔ) 描述 Redux 和 React 之間沒有關(guān)系。Redux 可以搭配 React、Angular 甚至純 JS。但是 Redux 還是比較適合和 React 搭配的，因?yàn)?React 允許你以 state 的形式...

    jsliang 評(píng)論0 收藏0

  • react開發(fā)教程（十）redux結(jié)合react

    摘要：描述和之間沒有關(guān)系。但是還是比較適合和搭配的，因?yàn)樵试S你以的形式來描述界面，而非常擅長(zhǎng)控制的變化。應(yīng)用中應(yīng)有且僅有一個(gè)。只需要在渲染根組件時(shí)使用即可。創(chuàng)建上一篇開發(fā)教程九基礎(chǔ) 描述 Redux 和 React 之間沒有關(guān)系。Redux 可以搭配 React、Angular 甚至純 JS。但是 Redux 還是比較適合和 React 搭配的，因?yàn)?React 允許你以 state 的形式...

    yck 評(píng)論0 收藏0

  • 前端每周清單半年盤點(diǎn)之 React 與 ReactNative 篇

    摘要：前端每周清單半年盤點(diǎn)之與篇前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開發(fā)教程工程實(shí)踐深度閱讀開源項(xiàng)目巔峰人生等欄目。與求同存異近日，宣布將的構(gòu)建工具由遷移到，引發(fā)了很多開發(fā)者的討論。 前端每周清單半年盤點(diǎn)之 React 與 ReactNative 篇 前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)；分為...

    Barry_Ng 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<