听说你需要这样学习Redux

最新推荐文章于 2022-09-29 00:00:00 发布

qizhenshuai

最新推荐文章于 2022-09-29 00:00:00 发布

阅读量364

点赞数

分类专栏： React-Native技术篇文章标签： redux 数据

本文链接：https://blog.csdn.net/qizhenshuai/article/details/78202500

版权

React-Native技术篇专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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

和 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 中。一般情况下会省略这个参数。