成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

十分鐘理解Redux核心思想，過(guò)目不忘。

xuexiangjys / 2028人閱讀

摘要：數(shù)據(jù)流簡(jiǎn)單介紹，比較簡(jiǎn)潔，請(qǐng)牢記于心。有時(shí)候可以使用生成器來(lái)批量生產(chǎn)相似對(duì)象，如我需要根據(jù)不同的來(lái)生成高度相似的附加的信息說(shuō)明雖然上面數(shù)據(jù)流提到，通過(guò)處理生成后才能夠更改信息。

白話Redux工作原理。淺顯易懂。 
如有紕漏或疑問(wèn)，歡迎交流。
Redux 約法三章 唯一數(shù)據(jù)源(state)

雖然redux中的state與react沒(méi)有聯(lián)系，但可以簡(jiǎn)單理解為react組件中的this.state。
html文檔只是state的一種表現(xiàn)形式。所有html的數(shù)據(jù)應(yīng)該都是直接或間接來(lái)自于state，否則UI視圖是無(wú)法因state改變而更新的。

數(shù)據(jù)源(state)只讀

不應(yīng)該直接修改state數(shù)據(jù)。
對(duì)于數(shù)組使用：

Array.prototype.slice()//對(duì)數(shù)組進(jìn)行拷貝
//使用ES6： 
[...state, ...newState]

對(duì)于對(duì)象使用：

Object.assign({}, state, change1, change2...)//對(duì)對(duì)象進(jìn)行拷貝
//使用ES6:
{...state, ...newState}
通過(guò)純函數(shù)(pure function)改變數(shù)據(jù)源(state)

pure function: 無(wú)其他API（包括Math, Date等）調(diào)用，無(wú)異步操作，preState => newState。

Redux數(shù)據(jù)流

簡(jiǎn)單介紹store/reducer/action， 比較簡(jiǎn)潔，請(qǐng)牢記于心。

store
UI唯一數(shù)據(jù)來(lái)源，可以理解為react中的state，store信息的變化會(huì)觸發(fā)視圖更新.

action
對(duì)象。必須擁有type屬性,用來(lái)描述發(fā)生什么?？蛇x擇攜帶發(fā)生時(shí)的數(shù)據(jù)，如用戶輸入的input value。切記：僅僅用來(lái)表述發(fā)生了什么。

reducer
pure function（上面有解釋?zhuān)?。根?jù)action.type來(lái)做出反應(yīng)，(preState, action) => newState，生成的state是用來(lái)改變store的。

所以，data flow（數(shù)據(jù)流）:

UI發(fā)出動(dòng)作，如click, submit;

action, 描述發(fā)生了什么;

reducer處理發(fā)生的事情，生成新state;

store被更新；

UI響應(yīng)store更新

...

Redux action

舉幾個(gè)例子，可能會(huì)比較直觀：

{
  type: “TOGGLE_TODO”, //這個(gè)type屬性必須要，必須是字符串
  index: 5 //附加信息，自己根據(jù)需要選擇是否加入
}；
{
  type: “ADD_TODO”,
  text：“學(xué)習(xí)Redux” //附加信息，這里是input value
}

沒(méi)別的，就是這么簡(jiǎn)單。
有時(shí)候可以使用action生成器(action creators)來(lái)批量生產(chǎn)相似action對(duì)象，如：

//我需要根據(jù)不同的input value來(lái)生成高度相似的action:
function (text) {
  return {
    type: "ADD_TODO",
    text: text //附加的信息
  }
}

說(shuō)明
雖然上面數(shù)據(jù)流提到，action通過(guò)reducer處理生成newState后才能夠更改store信息。但是為了更好的語(yǔ)義編程，Redux通過(guò)語(yǔ)句store.dispatch(action)來(lái)更新store，reducer對(duì)action的處理在內(nèi)部處理。

Redux reducer

很簡(jiǎn)單

(theState, action) => (newState);
//僅僅只是根據(jù)action.type處理一下需要更新的state

來(lái)看一個(gè)相對(duì)完整的reducer:

function todoApp(state = initialState, action) { //注意需要處理undefined情況下的state默認(rèn)值
  switch (action.type) {  //根據(jù)action.type來(lái)判斷
    case "SET_VISIBILITY_FILTER":
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    case “ADD_TODO”:  //處理“ADD_TODO”的action type
      //返回新state(newState),注意不要直接改變state，對(duì)象使用了
      //Object.assign()。也可以使用ES的...操作符
      return Object.assign({}, state, {
        todos: [
          ...state.todos,
          {
            text: action.text,
            completed: false
          }
        ]
      })
    case “TOGGLE_TODO”:  //處理“TOGGLE_TODO”的action type
      return Object.assign({}, state, {
        todos: state.todos.map((todo, index) => {
          if (index === action.index) {
            return Object.assign({}, todo, {
              completed: !todo.completed
            })
          }
          return todo
        })
      })
    default:
      return state
  }
}
Redux store

store
UI視圖唯一數(shù)據(jù)來(lái)源（直接或間接），可以獲取state，更新state，監(jiān)聽(tīng)state變化，取消監(jiān)聽(tīng)。所以store提供了一下方法：

store.getState() 獲取當(dāng)前state

store.dispatch(action) 更新state

store.subscribe(listener) store更新后回調(diào)listener，回調(diào)函數(shù)里面可以調(diào)用store.getStore()來(lái)獲取更新后得state喲~

取消listener的方式比較特別：再調(diào)用一次store.subscribe(sameListner)

ps: 如有紕漏或疑問(wèn)，歡迎交流。
先寫(xiě)這么多，有時(shí)間繼續(xù)更新。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/52588.html

相關(guān)文章

  • 十分鐘理解Redux核心思想，過(guò)目不忘。

    摘要：數(shù)據(jù)流簡(jiǎn)單介紹，比較簡(jiǎn)潔，請(qǐng)牢記于心。有時(shí)候可以使用生成器來(lái)批量生產(chǎn)相似對(duì)象，如我需要根據(jù)不同的來(lái)生成高度相似的附加的信息說(shuō)明雖然上面數(shù)據(jù)流提到，通過(guò)處理生成后才能夠更改信息。 白話Redux工作原理。淺顯易懂。 如有紕漏或疑問(wèn)，歡迎交流。 Redux 約法三章 唯一數(shù)據(jù)源(state) 雖然redux中的state與react沒(méi)有聯(lián)系，但可以簡(jiǎn)單理解為react組件中的this.st...

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

  • 7月份前端資源分享

    摘要：更多資源請(qǐng)文章轉(zhuǎn)自月份前端資源分享的作用數(shù)組元素隨機(jī)化排序算法實(shí)現(xiàn)學(xué)習(xí)筆記數(shù)組隨機(jī)排序個(gè)變態(tài)題解析上個(gè)變態(tài)題解析下中的數(shù)字前端開(kāi)發(fā)筆記本過(guò)目不忘正則表達(dá)式聊一聊前端存儲(chǔ)那些事兒一鍵分享到各種寫(xiě)給剛?cè)腴T(mén)的前端工程師的前后端交互指南物聯(lián)網(wǎng)世界的 更多資源請(qǐng)Star：https://github.com/maidishike... 文章轉(zhuǎn)自：https://github.com/jsfr...

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

  • React 328道最全面試題(持續(xù)更新)

    摘要：希望大家在這浮夸的前端圈里，保持冷靜，堅(jiān)持每天花分鐘來(lái)學(xué)習(xí)與思考。 今天的React題沒(méi)有太多的故事…… 半個(gè)月前出了248個(gè)Vue的知識(shí)點(diǎn)，受到很多朋友的關(guān)注，都強(qiáng)烈要求再出多些React相前的面試題，受到大家的邀請(qǐng)，我又找了20多個(gè)React的使用者，他們給出了328道React的面試題，由我整理好發(fā)給大家，同時(shí)發(fā)布在了前端面試每日3+1的React專(zhuān)題，希望對(duì)大家有所幫助，同時(shí)大...

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

  • 深入redux技術(shù)棧

    摘要：另外，內(nèi)置的函數(shù)在經(jīng)過(guò)一系列校驗(yàn)后，觸發(fā)，之后被更改，之后依次調(diào)用監(jiān)聽(tīng)，完成整個(gè)狀態(tài)樹(shù)的更新?？偠灾袷剡@套規(guī)范并不是強(qiáng)制性的，但是項(xiàng)目一旦稍微復(fù)雜一些，這樣做的好處就可以充分彰顯出來(lái)。 這一篇是接上一篇react進(jìn)階漫談的第二篇，這一篇主要分析redux的思想和應(yīng)用，同樣參考了網(wǎng)絡(luò)上的大量資料，但代碼同樣都是自己嘗試實(shí)踐所得，在這里分享出來(lái)，僅供一起學(xué)習(xí)(上一篇地址:個(gè)人博客／s...

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

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

0條評(píng)論

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