Redux分享教案.pptx

Redux;前言 Redux简介 actions/reducer/store/middleware react-redux 总结;React Native是什么 一次编写，多处运行 web技术，native体验 state和props是什么 组件其实是状态机，用户互动state改变，触发UI重新渲染 父级向下级传递属性，下级内部只读;如果此时我点击了Button，它的样式是否改变？;如果情况再复杂点呢？;我们希望是什么样子？;Redux是什么？;对了，什么叫状态容器？;那什么是Flux？;Flux数据流动;Redux数据流动;Actions;Reducer;Store;middleware;state以单一对象存储在store对象中 state是只读的，只有get，没有set 使用纯函数reducer执行state更新;Redux 并不依赖于 React，它支持多种框架 Ember、Angular、jQuery 甚至纯 JavaScript Redux用于管理state，与具体的View框架无关。Redux特别适合 state = UI 的框架，比如React;（主流）Connect 组件主要为 React 组件提供 store 中的部分 state 数据 及 dispatch 方法，这样 React 组件就可以通过 dispatch 来更新全局 state。 （非主流）让组件通过调用函数来更新state，const actions = bindActionCreator(XXActions, dispatch)能把actions和dispatch揉在一起，成为具备操作store.state的actions。;ps可以得到注入的store中的部分state和dispatch;action;Connect组件需要的store是由Provider提供的 Provider继承了React.Component，使自己能以组件形式注入store，其子组件也能在Context中得到store 一般子组件不去直接访问store，都是为里面的Connect用的;演示react native ＋ redux的完整demo：美团图书馆;redux是一个单向数据流的架构，提供可预测状态管理 分离了state和props，防止造成混乱 分离了UI和业务逻辑（中间件react-thunk也可以分离出异步数据操作）;谢谢