本文主要介绍redux使用流程(redux-saga原则)，下面一起看看redux使用流程(redux-saga原则)相关资讯。
目录1。redux是什么？2.redux 3的原理。redux怎么用？(1).安装redux，创建redux文件夹，建立store.js(2)。建立reducers.js(3)。介绍store.subscribe(4)。介绍一下react-redux1。redux 1。redux是什么？react只是dom的抽象层，并不是web应用的完整解决方案。react只是一个轻量级的视图层框架，如果要用于大规模的应用，要和视图层框架redux一起使用。主要用在多交互多数据源的场景中，不一定要用，但是一定要能。
2.redux的原理redux的原理先用一张图来说明，比较好理解。
首先，用户发出一个动作。
？1store.dispatch(动作)；然后，存储自动调用reducer并传入两个参数:当前状态和接收到的动作。减速器将返回新状态。
？1 let next state = todo app(previous state，action)；一旦状态改变，存储将调用器函数。
？12//设置器函数store.subscribe(器)；侦听器可以通过store.getstate获取当前状态。如果使用react，可以触发视图的重新渲染。
？1234 function listener{ let new state = store . getstate；component . set state(new state)；}3.redux怎么用？(1).安装redux，创建redux文件夹，建立store.js这个文件专用于公开一个store对象，整个应用只有一个store对象。
安装redux :纱添加redux/npm安装redux
？123456789//介绍createstore，专门用于从 redux //引入为计数组件提供服务的reducerimport countreducer。。/count _ reducer ;//引入redux-thunk，用于支持异步actionimport thunk from reduce-thunk ;//expose store //applymiddleware是一个thunk导出默认的create store (countreducer，applymiddleware(thunk))(2)。create reducers.js1 .该文件用于创建服务于count组件的reducer，reducer的本质是一个函数。2.reducer函数将接收两个参数，即:前一状态和动作对象。123456789101112131415 const init state = 0//初始化状态导出默认函数计数缩减器(prestate = init state，action){//console . log(prestate)；//get: type，data const {type，data} = action //根据type { case ;incr://if it is ;decr: with return prestate data cas: return prestate } }(3)决定如何处理数据切换(type)。引入store.subscribe来监控商店中的每一个修改。
？1234567// public index.js从 。/redux/store ;//订阅当存储中的数据发生变化时，数据会更新。写到这里让全世界都拥有store . subscribe(= { react dom . render(app/，document。getelementbyid( ;根与树。;))}) (4).介绍react-redox react-r:provider)。、连接等。)，使用它可以更好的组织管理我们的代码，在react中更方便的使用redux。
下载react-redux
创建计数文件
？12345678910111213141516171819202122324272829303132334353738394041424445464748//从 .../.../组件/计数 / connect用于将ui组件与redux import {connect}从 react-redux ;- .2.返回的对象中的键被用作传递给ui组件props的键。该值作为值3传递给ui组件props，mapstatetoprops用于传递状态*/函数mapstatetoprops(state){ return { count : state } }。- .2.返回的对象中的键被用作传递给ui组件props的键。value是传递给ui组件props的值。3.mapdispatchtoprops是用于传递操作状态*/函数mapdispatchtoprops(调度)的方法。{ return { jia : number = dispatch(createincrementaction(number))、jia : number = dispatch(createdecrementaction(number))、jiaasync:(number，time)= dispatch(createincrementsyncaction(number，time))、}}/use connec。t创建并公开一个名为export default count(mapstatetops，mapdispatchtoprops)(count ui)//)//improved export default connect(state =({ count : state })，//mapdispatchtoprops一般写法/* dispatch =({ jia : number = dispatch(create increment(number))、jian : number = dispatch(createdelevation(number))、jiaasynccho 0-@ . com(number，time)= dispatch(createincrementasynaction(number，time)))*//mapdispatchtoprops的简写{ jia : createincrement、jian : createdelement、jiaasynccho 0-@ . com createincrementsyn
？1234567891011121314151617/*该文件为count组件*/import {increment，decrement}从 ../常数 //同步动作。是指以action的值为对象的一般对象，export const increment = data =({ type : increase，data })export const decrement = data =({ type : decrement，data })//异步action是指action的值是一个函数，同步action通常在异步action中调用，不需要。export const increment sync =(data，time) = { return (dispatch)= { settimeout(= { dispatch(incr:你可能感兴趣的文章详细讲解了react-redux中connect的用法介绍和原理分析。javascript状态容器redux一文解释了redux在react中的初始用法标签:
组件对象
了解更多redux使用流程(redux-saga原则)相关内容请关注本站点。