FLUX、Redux

176 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第5天,点击查看活动详情

flux简介:

flux是一种管理思想(数据集中化管理思想,也是数据单向流的管理),最先由Facebook提出。

注意:flux管理的思想

1、数据是集中化的统一管理,在整个开发中,应该只有一个数据源。
2、在flux数据的流向都是单向的。

执行流程:

1、触发一个dispatcher,由dispatcher进行数据的修改。
2、数据修改后,通知页面做新的渲染,显示最新的数据(使用一种设计模式:发布订阅模式) 3、视图可能再一次触发新的dispatcher。

redux入门使用

注意:flux这是一种思想,没有落地,实际落地的产品就是redux。

redux是遵循了flux思想开发出来的一个库。会给我们提供一些API,然后及逆行集中化的管理数据。
redux是一个库,说白了这个库就是提供数据的统一管理,和使用哪些技术没有必然的联系。不是说redux必须要和react使用。

React-redux

react-redux 就是Redux官方出的用于配合React的绑定库
react-redux 能够使你的React组件从Redux store中很方便的读取数据,并且向store中分发action以此来更新数据

React-redux中两个重要的成员

Provider:这个组件能够使你整个APP能够获取到store中的数据;该组件包裹在根组件最外层,使所有的子组件都可以拿到State;Provider接受store作为Props,通过context往下传递,这样react中任何组件都可以通过context获取store
Connect:这个方法能够使组件跟store来进行关联;Provider内部组件如果想要使用state中的数据,就必须要connect进行一层包裹封装,也就是必须要被connect进行加强;connect就是方便我们组件能够获获取到store中的state

CombineReducers介绍

1、combineReducers这个函数就是为了帮我们拆分不同的reducer,然后各自的reducer可以独立的操作state中属于自己的部分
2、combineReducers里面传递一个参数,这个参数是Object类型
3、key我们呢可以自己进行定义,value就是我们单个reducer
4、最终combineReducers会帮我们呢把各自独立的reducer进行整合,然后生成最终的reducer,传递到createStore中

拆分之后的特点和注意事项

1、通过combineReducers包裹之后的reducer会按照顺序一次调用
2、每次reducer调用传递过来的state,都是上一次的state,每个子reducer互不干扰
注意:如果当前的reducer没有匹配到action,应该把state原封不动的return回去