Redux 学习总结
1.前言
对于复杂的 Web 交互应用,相继出现了一系列的 MV* 框架,然而双向绑定的数据流容易让数据变得不可控制。
在任何应用中管理数据都是必不可少的。通过用户界面来编排数据流是一项具有挑战的工程。现代的 Web 应用会涉及复杂的 UI 交互,比如改变了一个地方的 UI 数据,需要直接或者间接的改变其他地方的 UI 数据。一些双向绑定的框架(比如:Angular.js 等)都是对这种场景比较好的解决方案。
对于一些应用(尤其是数据流比较简单的),这种双向绑定是非常快速和足够的解决方案。但是对于一些更加复杂的应用场景,数据双向绑定已经被证明是不够的,它会妨碍用户界面的设计。实际上,React 并没有解决这样一个复杂应用中比较复杂的数据流问题(虽然后面出现了 Flux 这种解决方案),但是他确实解决了一个组件中数据流的问题
React 的横空出世一度让 Web App 的概念如火如荼,这种单向的数据流也就需要新的模式来组织。
在这个过程中对状态的管理相继出现了 Flux 等解决方案,在后来的发展中,Redux 由于单一的 Store 让大家更是喜欢。
2.入门
2.1概念
2.1.1 Store
Redux是管理整个APP的状态,Store是用来存储整个APP状态。
Store还有几个API: 组件获取状态的接口 getState()、组件通过 action 和数据进行 dispath 更新 Store 的接口 dispatch(action)、Store 发生改变之后进行 subscribe 改变组件 view 的接口 subscribe()。
getState():获取当前的state树;
dispatch(action):触发一个action,创建state;
subscribe(listener):
replaceReducer(nextReducer)
2.1.2 action
action是用来接收一个指示和数据,通过action进行dispatch来根据这个动作和数据进行Store的更新。
简单来只要想让改变Store里面的state就要触发action。
常见的action写法:
type:'ACTIONS',
text:{
content:'xxxx'
}
2.1.3 reducer
reducer是action和store关联的中间一层,也是一个普通的函数,用来修改store的状态。
Store中数据的更新通过触发action进行dispatch,action会有一个type和一个text,但是并没有去直接更新数据。而是用reducer接受action的type和text,根type来进行数据的整合,根据原来的Store中的state和action的type和text生成新的state给Store,进行Store的更新。
combineRedecers(reducers):当我们的应用比较复杂的时候,我们可能会分开写好几个reducer,这个函数的作用就是把这些单独的reduce合并为一个大的reduce,需要注意的是我们的state的结构和我们的各个reducer是一一对应的。
总结
Redux 只有一个单一的数据源,并且这个数据源是只读的,修改这个数据源必须通过 dispatch action,action 只是告知了 type 和 text,这个时候 reducer 结合上一个 state 和 action 做出自己的响应,返回新的 state 送入 store。
在 reducer 中,他接收上一个 state 与 action,返回一个新的 state。这个过程是纯函数式的,返回的结果由进去的参数决定,不会随着外界的变化而发生改变。
使用
自己搭建一个简单的redux的React Native项目
https://github.com/qizhenshuai/Ethan.git
react-redux
react native在数据状态发生变化的时候就会进行render,从而会发生布局的变化。我们一会都会在shouldComponentUpdate来处理一个数据变化,但是对于一个界面来的数据来说就显得非常的麻烦,同时也会消耗不小的一笔开销。
react-redux的出现就解决了这个问题,同时使整个APP的灵活性和可维护性大大的提高。
其实react和redux并没有任何的关系,redux主要是通过了一个全局的store,react是从store中取出数据,store如果发生了变化,react就会重新进行渲染。
react-redux的API
<Provider store> 和 connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])。
Provider 是在原有的 APP 上面包一层,然后接收 store 作为 props,然后给 connect 用。
connect 应该是 react-redux 的核心。他接收 store 提供的 state 和 action,返回给我们的 react 组件;还有一个很重要的一点是在 connect 这层 react-redux 做了优化,保证给组件只传和他相关的 state,这也就保证了性能上的优势
connect 接收 store 提供的 state 和 action,返回给我们的 react 组件;还有一个很重要的一点是在 connect 这层 react-redux 做了优化,保证给组件只传和他相关的 state,这也就保证了性能上的优势
mapStateToProps 接收两个参数 state、ownProps,通常情况下我们只需要第一个参数,如果有第二个参数 ownProps,其也将传给组件的 props,并且当组件的 props 发生变化时也会调用 mapStateToProps。
action 就是 mapDispatchToProps,他可以是个函数,也可以是个对象。如果是个函数,这个函数将接收一个 dispatch 函数,然后由我们决定返回怎样的一个对象,这个对象会通过 dispatch 函数与 action creator 绑定起来;如果是个对象,则这个对象中的函数都会被当做 action creator,而且这个对象会与 store 绑定在一起,其中所定义的方法名将作为属性名,合并到组件的 props 中。一般情况下会省略这个参数。
3.后言
Redux还有一些中间件比如redux-thunk、redux-saga等等,理解这些会让你的redux更新方便的实现状态的管理。以上都是自己学习的一些理解分享给大家,以后一起学习,共同进步。