react-router-redux 介紹
redux 的精神是所有狀態都保存在一個 store. 透過 action 去改變 store, 而 View 會依照新的 store 重新 render. 如此一直循環的行為, 也是一種 one-way data flow 的實現.
react-router-redux 的目的就是要把 react-router 的 history 跟 store 互相同步, 也就是說 store 裡面會有 router 的狀態, 整個流程會像這樣:
history + store → react-router-redux → enhanced history → react-router
這邊的 enhanced history 指的是會將 react-router 的 history 新增一些東西, 再提供給 react-router, 例如改寫 history.listen(), 這是為了讓 store 同步被更新.
syncHistoryWithStore
import { browserHistory } from ‘react-router’
import { syncHistoryWithStore } from ‘react-router-redux’const history = syncHistoryWithStore(browserHistory, store)
當在一開始使用的時候, 一定會看到這樣的宣告. 目的是為了讓 history 與 store 能彼此同步.
我們可以看一下原始碼 syncHistoryWithStore
const handleLocationChange = (location) => {
// Tell the store to update by dispatching an action
store.dispatch({
type: LOCATION_CHANGE,
payload: location
})
}
unsubscribeFromHistory = history.listen(handleLocationChange)history 與 store 就是一開始傳入的兩個參數, 可以看到 history 會觸發 store.dispatch. 之後的東西都跟 Redux 一樣 → 呼叫 reducer → 改變 store 中 router 的狀態.
export const LOCATION_CHANGE = ‘@@router/LOCATION_CHANGE’
export function routerReducer( state ) {
if (type === LOCATION_CHANGE) {
return { …state, locationBeforeTransitions: payload }
}
return state
}
因為在之前的 syncHistoryWithStore 中, 我們已經把 store.dispatch 註冊到 history.listen 裡面了. 所以當 history 狀態改變 就會呼叫 reducer 同時更新 store.