只包括主要API,歡迎指正!
首先按庫react-redux、redux兩個庫分有如下API
react-redux主要包括兩個:
- Provider
<Provider store>
用法:<Provider store>
使元件層級中的 connect()
方法都能夠獲得 Redux store。正常情況下,你的根元件應該巢狀在 <Provider>
中才能使用connect()
方法。
實現方式:把store放到content上
- connect
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
用法:連線 React 元件
與Redux store
。連線操作不會改變原來的元件類。返回一個新的已與Redux store
連線的元件類。
mapStateToProps
: 將從content
拿到的state
放到props
上mapDispatchToProps
:
將dispatch
繫結到props
上,一般是繫結到action
上,這樣寫action
不用手動dispatch
mergeProps
:如果指定這個引數將拿到執行的結果
redux主要包括:
action
: 所有操作的集合dispatch
: 推送action到createStorecreateStore
: 提供了獲取state和dispatch方法,middleWare
的執行也在這個階段middleware
: 提供了dispatch過程的中間操作,所有的dispatch操作都會經過中介軟體
常見中介軟體寫法
function logger({ getState }) {
return (next) => (action) => {
console.log('will dispatch', action)
// 呼叫 middleware 鏈中下一個 middleware 的 dispatch。
let returnValue = next(action)
console.log('state after dispatch', getState())
// 一般會是 action 本身,除非
// 後面的 middleware 修改了它。
return returnValue
}
}
複製程式碼
中介軟體是一個巢狀了多層的高階函式,分別接受getState next action,返回next(action)
monkeypatch寫法
function logger(store) {
let next = store.dispatch
// Previously:
// store.dispatch = function dispatchAndLog(action) {
return function dispatchAndLog(action) {
console.log('dispatching', action)
let result = next(action)
console.log('next state', store.getState())
return result
}
}
複製程式碼
applyMiddleware簡單實現
function applyMiddlewareByMonkeypatching(store, middlewares) {
middlewares = middlewares.slice()
middlewares.reverse()
// Transform dispatch function with each middleware.
middlewares.forEach(middleware =>
// 由於每次middle會直接返回返回函式,然後在這裡賦值給store.dispatch,
、、 下一個middle在一開始的時候,就可以通過store.dispatch拿到上一個dispatch函式
store.dispatch = middleware(store)
)
}
複製程式碼