redux的详细介绍和使用！

Posted 2022-07-03 lishixiang-007

三层

视图(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
)