全国卫生机构建设管理系统网站,那家网站建设好,接单子做网站词,wordpress添加og标签Redux
作用
集中式管理react、vue、angular等应用中多个组件的状态#xff0c;是一个库#xff0c;不单单可用于react#xff0c;只是更多的用于react中
模型图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AaFD3raR-1682994570670)(img/re…Redux
作用
集中式管理react、vue、angular等应用中多个组件的状态是一个库不单单可用于react只是更多的用于react中
模型图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AaFD3raR-1682994570670)(img/redux模型图.png)]
三个核心
action
作用action是把数据从应用传到store的有效载荷是store数据的唯一来源创建
import { INCREMENT, DECREMENT } from ./constantexport const incrementAction (data) {return { type: INCREMENT, data }
}export const decrementAction (data) {return { type: DECREMENT, data }
}页面上的使用通过分发action操作数据
import { incrementAction, decrementAction } from ./redux/actionsexport default class index extends Component {increment () {const { value } this.selectNumberstore.dispatch(incrementAction(value))}
}异步action同步action中返回值为对象而异步action中返回值为函数其中一般会调用同步action
export const incrementAsyncAction (data, delay) {return (dispatch) {setTimeout(() {dispatch(incrementAction(data))}, delay)}
}reducer
作用reducer指定了应用状态的变化如何响应action并发送到store中特征本质是一个纯函数接收两个参数之前的状态(preState)、动作对象(action)。第一次被调用时preState为undefined创建
import { ADD_PERSON } from ../constantexport default function personReducer(preState, action) {if (preState undefined) {preState [{id: 001,name: Tom,age: 23}]}// 从action中取出type和dataconst { type, data } actionswitch (type) {case ADD_PERSON:// 没有对preState进行push或unshift操作因为redux默认若返回值和之前状态一致则不更新页面return [data, ...preState]default:return preState}
}纯函数 只要是同样的输入必定得到同样的输出。遵循以下约束
不得改写参数不能调用I/O的API不能调用Date.new()或者Math.random()等不纯的方法因为每次会得到不一样的结果
store
作用将action和reducer联系在一起维持应用中的状态特征一个应用只有一个store。当需要拆分数据处理逻辑时应该使用多个reducer创建import { legacy_createStore } from redux
import countReducer from ./reducerexport default legacy_createStore(countReducer)当使用异步action后需对store进行修改使用redux-thunk和中间件支持异步action修改后的store文件如下import { legacy_createStore, applyMiddleware } from redux
// 用于支持异步action
import thunk from redux-thunk
import countReducer from ./reducerexport default legacy_createStore(countReducer, applyMiddleware(thunk))页面上取值
render() {return (divh1当前求和为{store.getState()}/h1nbsp;/div)
}react-redux
定义
react-redux其实是Redux的官方React绑定库其中封装了一些Redux与React连接的操作可以是Redux的使用更加简单
模型图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ww8vq9Ro-1682994570671)(img/react-redux模型图.png)]
规则
所有的UI组件被一个容器组件包裹它们是父子关系UI组件不与Redux进行操作而是由容器组件与Redux进行操作可以使用Redux的任意api容器组件会传给UI组件如下数据 状态即mapStateToProps()操作状态的方法即mapDispatchToProps()
基础使用见04-react-redux基础使用
建立容器组件时的注意点
容器组件与UI组件通过react-redux中的connect进行连接传递mapStateToProps和mapDispatchToPropsmapStateToProps() 用于传递状态返回一个对象react-redux在调用该函数时已经传入了state此处的值传入UI组件中UI组件可使用this.props.xxx拿到对应的值用到的store在根目录中通过Provider包裹App组件并传入store的方式获取const root ReactDOM.createRoot(document.getElementById(root))
root.render(React.StrictModeProvider store{store}App //Provider/React.StrictMode
)mapDispatchToProps() 用于传递操作状态的方法返回一个对象对象的key自定义value是一个方法注意简写方式
建立UI组件时的注意点
不直接参与Redux的使用使用this.props.xxx拿到容器组件传来对应的值
融合UI组件与容器组件
开发时将UI组件与容器组件进行融合后放到一个文件中见05-融合UI组件与容器组件
多个组件间的数据共享重要见06-react-redux数据共享
完善各个组件的action和reducer合并reducer如下
import { combineReducers } from redux
import countReducer from ./reducers/count
import personReducer from ./reducers/person/*** 合并Reducer* 使用combineReducers合并Reducerkey为自定义value为reducer*/
export default allReducer combineReducers({count: countReducer,persons: personReducer
})注意合并reducer后导致state变化变为一个新的对象对于组件mapStateToProps中对应的state需要通过.属性的方式取到 3. 修改store使用合并后的reducer
import { legacy_createStore, applyMiddleware } from redux
// 用于支持异步action
import thunk from redux-thunk
// 合并后的reducer
import allReducer from ./reducers/indexexport default legacy_createStore(allReducer, applyMiddleware(thunk))
