react redux深度學習

2021-09-24 22:29:15 字數 1537 閱讀 2209

state:維護元件內部資料狀態

store是應用狀態state的管理者

1.getstate() # 獲取整個state

2.dispatch(action) # 觸發state改變的【唯一途徑】

3.subscribe(listener) # dom中的addeventlisttener

4.replacereducer(nextreducer) # 一般在webpack

state和store關係是: state = store.getstate()

redux規定,乙個應用只應有乙個單一的store,其管理者唯一的應用狀態state

redux還規定,不能直接修改應用的狀態state,

var state = store.getstate()

state.counter = state.counter + 1 // 禁止在業務邏輯中直接修改state

props:維護元件外部傳入資料的資訊

context: 維護跨級元件資訊的傳遞

redux,資料狀態列

核心概念:

1.單一資料來源: 使用redux的程式,所有的state都儲存在乙個單一的資料store內部,類似乙個巨大的物件樹

2.state是唯讀的:state是唯讀的,能改變state的唯一方式是通過觸發action來修改

3.使用純函式執行修改:為了描述action如何改變state store,你需要編寫reducers.

reducers是一些純函式,介面當前state和action,只需要根據action,返回對應的state,

乙個函式的返回結果只依賴於它的引數,並且在執行的過程裡面沒有***,我們就把這個函式叫純函式

基礎:

action:

顧名思義,action就是動作,也就是通過動作來修改state的值,也是修改store的唯一途徑。

acting本質就是乙個普通的js物件,我們約定這個物件必須要有乙個欄位type,來表示我們的

動作名稱,一般我們會使用乙個常量來表示 type對應的值

此外,我們還會把希望state變成什麼樣子的對應的值來通過action傳進來,那麼這裡action可能會類似這樣子的:

reducer:

action只是描述了有事情發生這件事實,但並沒有說明要做哪些改變,這這是reducer需要做的事情

reducer作為純函式,內部不建議使用任何有***的操作,比如外部變數,任何導致相同輸入

卻有輸出結果不一樣的操作

如果我們的reducer比較多,比較複雜,我們不能把所有的邏輯都放到乙個reducer裡面去處

理,這個時候我們就需要拆分reducer

就可以用redux提供的api就是combinereducers api

store:store就是redux應用的唯一資料來源就,我們呼叫createstore api建立store

react redux學習總結

1 生命週期流程圖 2 關於this export default class mycomponent extends react.component handerclick hander4click 3 ajax請求的方式 a.封裝xmlhttprequest物件的ajax b.promise風格...

react redux 原始碼學習

function createstate reducer dispatch 然後將 我們要用到的 getstate,dispatch,subscribe 給暴露出去 return 這裡是使用了 react 的 上下文內容,不贅述 export class provide extends compon...

react redux使用小結

總結 需要使用的庫redux,react redux,react router redux 使用乙個react redux 的庫使得redux的使用更簡潔,它提供了provider和connect方法 先在入口檔案內使用 元件 provider 這裡使用了redux中的重要組成部分store,所以下...