本文主要介绍redux的工作原理和使用方法。边肖认为这很好。现在分享给大家,给大家一个参考。来和边肖一起看看吧。
:
目录
1.Redux是什么?2.redux 3的原理。Redux怎么用?(1).安装redux,创建redux文件夹,构建store.js(2)。构建reducers.js(3)。介绍store.subscribe(4)。介绍一下react-redux。
1. redux 是什么?
React只是DOM的抽象层,并不是Web应用的完整解决方案。React只是一个轻量级的视图层框架。如果要做大规模的应用,要配合视图层框架redux一起使用。主要用于多交互、多数据源的场景。没必要,但有必要。
2.redux的原理
redux的原理,先用一张图说明,很好理解。
首先,用户发出一个动作。
store.dispatch(动作);
然后,存储自动调用Reducer并传入两个参数:当前状态和接收到的动作。减速器返回新状态。
设next state=todo app(previous state,action);
一旦状态改变,商店将调用监听功能。
//设置监听功能
store.subscribe(监听器);
侦听器可以通过store.getState()获取当前状态。如果使用React,可以触发视图的重新渲染。
函数列表器(){
let new state=store . getstate();
component . set state(new state);
}
3. 如何使用 redux?
(1).安装redux,创建redux文件夹,建立store.js
这个文件专门用来公开一个store对象,整个应用程序中只有一个store对象。
安装Redux:纱线添加Redux/NPM安装Redux
//引入createStore,专门用来创建redux中最核心的Store对象。
从“redux”导入{createStore,applyMiddleware}
//引入一个为计数组件服务的缩减器
从'导入国家证书。/count_reducer '
//引入redux-thunk支持异步动作
从“redux-thunk”导入thunk
//公开存储区
//applyMiddleware是thunk用在中间位。
导出默认createStore(countReducer,applyMiddleware(thunk))
(2).建立reducers.js
1.这个文件用于创建一个为Count组件服务的reducer。减速器的本质是一个函数。
2.2.reducer函数将接收两个参数:前一个preState和action对象。
Const initState=0 //初始化状态
导出默认函数count reducer(preState=initState,action){
//console . log(preState);
//Get: type,动作对象的数据
const {type,data}=action
//根据类型决定如何处理数据
开关(类型){
如果是加号,则为“increment”://case
返回预状态数据
大小写“减少”://如果是减少
返回预状态数据
默认值:
返回预定状态
}
}
(3).引入store.subscribe
主要使用subscribe来监控商店中的每个修改。
//公共索引. js
从'导入存储。/redux/store '
//订阅当存储中的数据发生变化时,它会更新数据,这里写的是全局所有权。
store.subscribe(()={
ReactDOM.render(App/,document.getElementById('root '))
})
(4). 引入react-redux
React-redux是redux作者打包的库,是第三方模块。它进一步简化了Redux,并提供了一些额外的API(例如,Provider、connect等。).使用它可以更好地组织和管理我们的代码,并且更容易在React中使用Redux。
下载react-redux
创建计数文件
//引入Count的UI组件
从'导入CountUI././组件/计数'
//connect的引入是为了用redux连接UI组件
从“react-redux”导入{connect}
-
/*
1.1.mapStateToProps函数返回一个对象;
2.返回的对象中的键是传递给UI组件props的键,值是传递给UI组件props的值。
3.mapStateToProps用于传输状态
*/
函数mapStateToProps(state){
返回{count:state}
}
-
/*
1.1.mapDispatchToProps函数返回一个对象;
2.返回的对象中的键是传递给UI组件props的键,值是传递给UI组件props的值。
3.3.mapDispatchToProps用于传输操作状态的方法
*/
函数mapDispatchToProps(调度){
返回{
贾:number=dispatch(createIncrementAction(number)),
Jian:number=dispatch(createDecrementAction(number)),
jiaAsync:(number,time)=dispatch(createincrementasynccaction(number,time)),
}
}
//使用connect()()创建并暴露一个数数的容器组件
导出默认连接(mapStateToProps,mapDispatchToProps)(CountUI)
//改良
导出默认连接(
状态=({count:state}),
//mapDispatchToProps的一般写法
/* dispatch=({
贾:number=dispatch(createIncrementAction(number)),
Jian:number=dispatch(createDecrementAction(number)),
jiaAsync:(number,time)=dispatch(createincrementasynccaction(number,time)),
}) */
//mapDispatchToProps的简写
{
贾:创造增量行动,
jian:createDecrementAction,
贾异步:createincrementasynccaction,
}
)(计数)
生成行为对象,并分别暴露
/*
该文件专门为数数组件生成行为对象
*/
从'导入{增量,减量}./常数
//同步行动,就是指行为的值为目标类型的一般对象
export const INCREMENT=data=({ type:INCREMENT,data})
export const DECREMENT=data=({ type:DECREMENT,data})
//异步行动,就是指行为的值为函数,异步行为中一般都会调用同步行动,异步行为不是必须要用的。
导出常量增量同步=(数据,时间)={
退货(发货)={
setTimeout(()={
分派(增量(数据))
},时间)
}
}
到此这篇关于回家的工作原理讲解及使用方法的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持我们。
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。