本文主要介绍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.js1.这个文件用于创建一个为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-reduxReact-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(()={
分派（增量（数据))
},时间)
}
}
到此这篇关于回家的工作原理讲解及使用方法的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。
