在网上有着许多关于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这个库了,它作用在于提供Provider
和connect
两个重要的模块。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的框架,但是似乎不是太好表述清楚所有的细节。所以把源码放在这里