redux的詳細介紹和使用！

 

三層

視圖(view)
數據商店(store)
reducer

流程: 用戶操做視圖 視圖產生action 經過store轉發給reducer(同時還會接收store中的數據模型 state)

由reducer結合aciton.type以及state 產生新的 state 而後返回給 store

store在接收到新的state後 通知視圖進行更新

redux使用:

須要安裝2個模塊
npm i redux react-redux -S

建立store
import redux from "redux"

export let store = redux.createStore(reducer)

reducer的定義
export let reducer = (state={title:""},action){
switch(action.type){
case "xxx":
return newState = {...state,xxx:ddd}
break
default:
return state
}
}

視圖內使用
綁定更新視圖函數
this.unbind = store.subscribe(()=>{})
解綁更新視圖函數
this.unbind()

發送action
sotre.dispatch(action)

工具方法
1自動生成容器組件

前提 整個應用須要用<Provider>包裹起來 而且要注入store 例如:
import {Provider} from "react-redux"

let App = props => (
<Provider store={store}>
<Router>
<Switch>
<Route />
....
</Switch>
</Router>
</Provider>
)

render(<App/>,docu....)

而後在UI組件內 導入connect方法

import {connect} from "react-redux"

class UI extends React.Component{
...
}

let mstp = state => {
return {
title : state.home.title
}
}
//在組件內 使用 this.props.title

let mstp = dispatch => {
return {
sayHello : function(){
....
}
}
}

//在組件內使用sayHello方法 : this.props.sayHello()
//若是在函數中要發送action 則調用dispatch便可

export let Home = connect(mstp,mdtp)(UI)

合併reducer
能夠對reducer按照功能或者頁面進行劃分紅多個小的reducer
而後經過 combineReducers 具體以下

let reducer1 = (state={...},action)=>{
...
}

let reducer2 = (state={...},action)=>{
...
}

import {combineReducers} from "redux"

export let reducer = combineReducers({
home : reducer1,
list : reducer2
})

 

參考網站：https://segmentfault.com/a/1190000011474522?utm_source=tag-newest