您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
一、Flux
Redux是Flux思想的另一种实现方式，Flux一族框架（包括Redux）贯彻的最重要的观点是单向数据流；
1.MVC框架的缺陷
MVC是业界广泛接受的一种前端应用框架类型，这种框架把应用分为3个部分：
但是，在实际框架实现中，总是可以允许View和Model直接通信，因此会变得非常混乱！
2.Flux
2.1 Flux包含4个部分：
2.2 Flux的优势与不足
（1）优势：单向数据流。在Flux的理念里，如果想改变界面，就必须改变store中的状态，如果要改变store中的状态，必须派发一个action对象。
（2）不足：store之间依赖关系（如果两个store之间有依赖关系，就必须用上Dispatcher的waitFor函数）；难以进行服务器端渲染；store混杂了逻辑和状态。
二、Redux
1.Redux的基本原则：
1.1 唯一数据源：
指应用的状态数据应该只存储在唯一的一个store上，所有组件的数据源就是这个store上的状态。store是一个树形的对象，每个组件往往只是用树形对象上的一部分数据。要驱动用户界面渲染，就要改变应用的状态，但是改变状态的方法不是去修改状态上的值，而是创建一个新的状态对象返回给Redux，由Redux完成新的状态的组装。
1.2 数据改变只能通过纯函数完成：
这个纯函数就是Reducer，在Redux中，每个reducer的函数签名如下：
reducer（state，action）
第一个参数state是当前的状态，第二个参数action是接收到的action对象，而reducer要做的事情，就是根据state和action的值产生一个新的对象返回。reducer只负责计算状态，不负责存储状态。因为reducer是纯函数，函数的返回结果必须由参数state和action决定，而且不产生任何副作用，也不能修改参数state和action对象。
容器组件和傻瓜组件
（1）容器组件：和Redux Store打交道，读取Store的状态，用于初始化组件的状态，同时还要监听Store的状态改变；当Store状态发生变化时，需要更新组件状态，从而驱动组件重新渲染；当需要更新Store状态时，就要派发action对象。
（2）傻瓜组件：根据当前props和state，渲染出用户界面。这是一个纯函数，根据props产生结果。
3.1 connect：
export default connect（mapStateToProps，mapDispatchToProps）（Counter）
connect是React-Redux提供的一个方法，它接收两个参数mapStateToProps和mapDispatch-ToProps，执行结果依然是一个函数，所以才在后面又加一个圆括号，把connect函数执行的结果立刻执行，这一次参数是Counter这个傻瓜组件。这里有两个函数执行，第一次是connect函数的执行，第二次是把connect函数返回的函数再次执行，最后产生的就是容器组件。
connect函数作为容器组件，做的事情无外乎两件事：
（1）把store上的状态转换为内层傻瓜组件的prop；
（2）把内层傻瓜组件中的用户动作转化为派送给Store的动作，即把内层傻瓜组件暴露出来的函数类型的prop关联上dispatch函数的调用，每个prop代表的回调函数的主要区别就是dispatch函数的参数不同，这就是mapDispatchToProps函数做的事情。
3.2 Provider
React-Redux几乎就是provider。
React-Redux要求store是包含以下3个函数的object：
另外，React-Redux定义了provider的componentWillReceiveProps函数，React-Redux在componentWillReceiveProps函数中会检查这一次渲染时代表store的prop和上次的是否一样。如果不一样，就会告警，这样做是为了避免多次渲染用了不同的Redux store，每个Redux应用只能有一个Redux store，在整个Redux的生命周期中都应该保持Store的唯一性。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。