Redux分享ppt课件VIP

1,Redux,杨鑫Android20160324,2,前言Redux简介actions/reducer/store/middlewarereact-redux总结,目录,3,ReactNative是什么一次编写，多处运行web技术，native体验state和props是什么组件其实是状态机，用户互动state改变，触发UI重新渲染父级向下级传递属性，下级内部只读,前言,4,如果此时我点击了Button，它的样式是否改变？,5,如果情况再复杂点呢？,交互：父子、子父、兄弟组件通信跨层、反向数据流动职能：组件状态放哪业务逻辑放那数据放那,6,我们希望是什么样子？,单向数据流分离UI、逻辑和数据,7,Redux是什么？,Redux是JavaScript状态容器，提供可预测化的状态管理。Redux是由Flux演变而来。,8,对了，什么叫状态容器？,9,那什么是Flux？,Flux在这里并不是一个框架，而是提供了一套数据流动的方案,10,Flux数据流动,view触发action中的方法action发送dispatcherstore接收新的数据进行合并触发view中绑定在store上的方法通过修改局部state改变局部view,11,Redux数据流动,view直接触发dispatcher将action发送到reducer中后根节点会更新props，进而改变全局view,View,Dispatcher,Store,Actions,reducer,middleware,12,Actions,action可以理解为应用向store传递的数据信息（一般是用户交互信息）在实际应用中，传递的信息可以约定一个固定的数据格式,dispatch(action)是一个同步的过程：执行reducer更新state-调用store的监听处理函数。如果需要在dispatch时执行一些异步操作，可以通过引入middleware解决。,13,Reducer,reducer实际上就是一个函数：（previousState,action）=newState通过combineReducers(reduces)能把多个reducer合成一个rootreducer,reducer不存储state，reducer函数逻辑中不应该直接改变state对象，而是返回新的state对象,14,Store,在Redux应用中，只允许有一个store对象，可以通过combineReducers(reducers)来实现对state管理的逻辑划分（多个reducer）。,管理应用的state通过store.getState()可以获取state通过store.dispatch(action)来触发state更新通过store.subscribe(listener)来注册state变化监听器通过createStore(reducer,initialStae)创建,15,middleware,middleware其实就是高阶函数，作用于dispatch返回一个新的dispatch（附加了中间件功能）。可以形式化为：newDispatch=middleware1(middleware2(dispatch)。,16,state以单一对象存储在store对象中state是只读的，只有get，没有set使用纯函数reducer执行state更新,Redux的三大原则,state为单一对象，使得Redux只需要维护一棵状态树，服务端很容易初始化状态，易于服务器渲染。state只能通过dispatch(action)来触发更新，更新逻辑由reducer来执行。,17,Redux并不依赖于React，它支持多种框架Ember、Angular、jQuery甚至纯JavaScriptRedux用于管理state，与具体的View框架无关。Redux特别适合state=UI的框架，比如React,Redux和React,在React项目中使用Redux，比较好的方式是借助react-redux这个库来做连接。react-redux提供两个关键模块：Connect和Provider,18,（主流）Connect组件主要为React组件提供store中的部分state数据及dispatch方法，这样React组件就可以通过dispatch来更新全局state。（非主流）让组件通过调用函数来更新state，constactions=bindActionCreator(XXActions,dispatch)能把actions和dispatch揉在一起，成为具备操作store.state的actions。,Connect,19,ps可以得到注入的store中的部分state和dispatch,20,action,state更新,组件更新,Connect,handleChange,数据更新,setState(),render,store.subscribe(handleChange),21,Connect组件需要的store是由Provider提供的Provider继承了React.Component，使自己能以组件形式注入store，其子组件也能在Context中得到store一般子组件不去直接访问store，都是为里面的Connect用的,Provider,22,演示reactnativ