ReactNative使用redux

在网上有着许多关于redux的教程,由于自己本身接触ReactNative的时间也不久,使用过程中也没有什么特别复杂的场景,所以并不知道其中利端。但是在阮一峰的教程中有关于说明redux使用场景,当然既然要学习React想必redux知识是必不可少的。

redux简介

redux其实简单的来说就是用来管理这个应用的数据状态,在使用redux后再也不需要去操作state去改变状态了,整个数据来源将流向store管理,每一次执行一个动作都通过发出action来改变state。当使用过redux后会发现,其实redux不仅仅是一个类库,它还是一个程序的设计架构,使用redux后所有的操作都会变成链式。有一篇非常好的理解redux的文章 不写一行代码,轻松看懂 Redux 原理

redux机制

redux的三个重要的模块,也是这几个元素组成了redux架构。

  • action 一个响应动作的发生
  • reducer 处理不同的动作,来生成新的state
  • store 存储整个状态机

简单的描述一下我所理解的redux运行流程,首先用户发出一个动作,这个时候我们就会预先定义好一个action,然后根据动作的类型发出不同的action。一个action只提供用户动作的行为,并不提供处理逻辑。发出一个action必须得通过store提供dispatch(action)方法,在store收到一个action便会扔给reducer来处理这个事件,在reducer处理完逻辑后会返回给store新的state。之前提到过store是用来存储所有的状态机的,所以state改变了,相应的页面也会刷新。

redux使用

上面讲了所有的运行原理,现在关键点在于如何让一个组件绑定到store中去。这个时候就需要使用到react-redux这个库了,它作用在于提供Providerconnect两个重要的模块。
Provider是一个常规的组件,需要将Provider作为所有组件的顶点,也是说所有组件都是包裹在其中。它的工作很简单,就是接受redux的store作为props
connect便是链接redux和React的纽扣,组件连接到redux需要使用connect(select)(App)。其中select用于提供绑定需要的数据,App即是需要绑定的页面。
做好以上两个步骤,React和redux就已经绑定起来了,这个时候就可以使用store来作为统一的数据流了。

redux案例

下面用所述的内容来做一个简单的Demo,简单的建立好两个普通的action,一个是登陆动作,一个是监听输入框。

第一步

绑定根组件Provider

第二步

创建store,action,reducer


第三步

将页面映射到redux

上面几步,基本搭建好一个redux的框架,但是似乎不是太好表述清楚所有的细节。所以把源码放在这里