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,所以下...