redux基礎
一、設計思想:react是單項資料流框架,為了在相對較大的專案中方便進行狀態管理。
二、基本概念:
1.store:儲存資料並且是改變state
的地方,用createstore
來進行建立。(整個應用只能有乙個)
import
from
'redux'
;//createstore函式用來接收reducer函式作為引數,返回乙個新的store物件
const store =
createstore
(reducer)
export
default store
2.reducer純函式:
(1)儲存預設資料(用defaultstate);
const defaultstate =
(2)接收action
。
//reducer收到action物件後,必須給出乙個新的state傳遞到store中進行更新,這樣view才會發生變化。這種state的計算過程就叫做reducer
//reducer是乙個函式,接收當前state和action作為引數。
function
reducer
(state = defaultstate,action)
if(action.type===
add_item)if
(action.type===
delete_item
)// console.log(state,action)
return state
}
store.getstate()拿到當前state
this.state = store.getstate()
,這裡對於state
的改變用setstate
。
4.action
物件:state
變化能導致view
發生變化,同樣view
的變化也會導致state
發生變化,用只能戶接觸到view
,action
就是使用者通過檢視層發出的通知,以此來讓state
發生變化。
(以其中某乙個函式為例)
changeinputvalue
(e) store.
dispatch
(action)
}
5.store.dispatch
函式:根據上面**也能猜到,action
想要傳到reducer
使用這個函式才是唯一的方法。
6.store.subscribe
函式用於訂閱redux
的狀態。
//通過函式進行繫結
store.
subscribe
(this
.storechange)
//訂閱redux狀態
redux基本使用
actiontype.js 隨著專案大型化,所以要抽取出來乙個actiontype.js檔案來記錄各種actiontype常量 export const set currentindex set currentindex store.js import from redux import rootr...
redux的基本使用方法
redux的使用 檔案store index.js import from redux const counterreducer function statr 0,action const store creatstore counterreducer export default store 元件...
Redux基本介紹
react 只是 dom 的乙個抽象層,並不是 web 應用的完整解決方案。有兩個方面,它沒涉及。結構 元件之間的通訊 對於大型的複雜應用來說,這兩方面恰恰是最關鍵的。因此,只用 react 沒法寫大型應用 為了解決這個問題,2014年 facebook 提出了 flux 架構 的概念,引發了很多的...