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