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