摘要:它搭配解决了组件之间通信问题,这个通信问题,是组件和其它组件之间也可以跨层通信,不需要一层一层的把,父组件的数据往下传递。库解决了什么问题解决了跨层组件通信问题。
忽略此文,不敢浪费你的时间 Redux是什么?
Redux是Facebook提出一个数据状态管理的库,也可以说框架。它搭配React解决了组件之间通信问题,这个通信问题,是组件和其它组件之间也可以跨层通信,不需要一层一层的把,父组件的数据往下传递。这会增加代码复杂度和维护的复杂度。
如果使用React.createContext的API也可以实现跨层通信,你可以多带带写一个模块去封装Context.Provider和Context.Consumer,只有在根组件使用Context.Provider后,需要共享Context上的数据的组件,都可以通过引入Context.Consumer组件去获取公共的数据。哪个组件需要顶层组件的数据,就必须引入Context.Consumer。
//context.js export default Context = createContext("")
//app.js let store = createStore(reducer)
import Context from "./context.js"store{(data) => ( {data.time})}
整个Application的数据保存地。这里有一切应用所共享的数据,后台交互和用户输入的数据都在这里管理。Redux提供了一个方法,创造整个应用数据的store,只需要使用es6模块机制,import命名可以输出我们需要的接口。
import { createStore } from "redux" //创建store必须,外部注入数据和改变整个state的逻辑 let store = createStore(reducer,initalPreLoadState)action
描述界面的交互和行为的对象,用户要做什么事,必须发送一个action对象到store的dispatch函数里面,根据提供reducer去匹配action.type,如果没有type匹配对了,会执行接下里的逻辑,更新整个store里面该改变的数据。
store.dispatch的源代码里,对传入的action是否为对象做了判断,是否有type属性也做了判断。如果action没有问题,那么执行定义传入的reducer(state,action)函数,
reducerreducer是一个纯函数,什么样的输入就得出什么样的输出,怎么理解呢? store.dispatch发送了action,当然,这个store.dispatch早就放在了标签的事件里,等着用户去触发。action对象来到store.dispatch函数内存,有了action的数据,执行reducer函数,去匹配类型,执行对应的代码。
function add(state=0,action) { switch(action.type){ case "add": return state + 1 case "decre": return state - 1 default: return state } }改变state的唯一方式
state和view一一对应,state改变了,view也就改变了。state如何改变,界面的标签上,给定的事件,store.dispatch函数,该函数的参数是action对象,描述要做什么事,触发此函数,传递给整个应用的store,会执行store.dispatch函数里的reducer函数,去更新state,store.subscribe函数监听store的数据发生变化,便会触发此函数去更新React的根组件。
Redux没有解决什么?redux库提供了核心一个API,createStore函数,可以把整个应用的数据也就是存放在store里面,但是它真的只提供了数据,对于组件之间的通信,redux库是没有解决的。store里面的数据还是得从顶层组件往下传,一层一层传。
如果要跨组件通信,顶层组件与任意组件通信,redux必须借助react的Context的API,结合Redux和React结合成一个库,这样提供的两个API,就可以跨层通信。
React-Redux库解决了什么问题解决了跨层组件通信问题。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/104048.html
摘要:我现在写的这些是为了解决和这两个状态管理库之间的困惑。这甚至是危险的,因为这部分人将无法体验和这些库所要解决的问题。这肯定是要第一时间解决的问题。函数式编程是不断上升的范式,但对于大部分开发者来说是新奇的。规模持续增长的应 原文地址:Redux or MobX: An attempt to dissolve the Confusion 原文作者:rwieruch 我在去年大量的使用...
摘要:应用这说明并不是单指设计给用的,它是独立的一个函数库,可通用于各种应用。在数据流的最后,要触发最上层组件的,然后进行整体的重新渲染工作。单纯在的对象上是没有办法使用,要靠额外的函数库才能这样作,这是一定要使用类似像这种函数库的主要原因。 Redux的官网中用一句话来说明Redux是什么: Redux是针对JavaScript应用的可预测状态容器 这句话虽然简短,其实是有几个涵义的: ...
摘要:希望大家在这浮夸的前端圈里,保持冷静,坚持每天花分钟来学习与思考。 今天的React题没有太多的故事…… 半个月前出了248个Vue的知识点,受到很多朋友的关注,都强烈要求再出多些React相前的面试题,受到大家的邀请,我又找了20多个React的使用者,他们给出了328道React的面试题,由我整理好发给大家,同时发布在了前端面试每日3+1的React专题,希望对大家有所帮助,同时大...
摘要:面试题来源于网络,看一下高级前端的面试题,可以知道自己和高级前端的差距。 面试题来源于网络,看一下高级前端的面试题,可以知道自己和高级前端的差距。有些面试题会重复。 使用过的koa2中间件 koa-body原理 介绍自己写过的中间件 有没有涉及到Cluster 介绍pm2 master挂了的话pm2怎么处理 如何和MySQL进行通信 React声明周期及自己的理解 如何...
阅读 1983·2021-11-08 13:14
阅读 2912·2021-10-18 13:34
阅读 1980·2021-09-23 11:21
阅读 3561·2019-08-30 15:54
阅读 1693·2019-08-30 15:54
阅读 2876·2019-08-29 15:33
阅读 2544·2019-08-29 14:01
阅读 1923·2019-08-29 13:52