ReactNative之Redux入门（1）- Redux初步认识

注：本教程针对于有过React/ReactNative开发经验的人群。

注：如果看了半小时看不懂，请进入下一节直接编写Demo，编写完Demo后再回来看基本概念。

redux是什么？干什么用的？

英文原版： http://redux.js.org/

中文文档： http://www.redux.org.cn/

阮一峰老师博客： http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

如何去学习Redux？

1.简单阅读阮一峰老师的博客。Redux 入门教程（一）：基本用法 http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html 。

2.阅读我的第二篇文章，实现一个简单的小Demo。

3.从外往里依次研究他们的实现原理，掌握实现方法。

4.对中间件进行深入研究，并使用其他众多中间件。

react/react-native的缺陷：

1.稍大一点的项目state会变得难以维护。

2.非父子组件的通信难以实现。

3.state状态共享。

等...

如何解决这些缺陷？

需要一个状态容器来管理state。

现在有哪些状态容器呢？

Redux、Mobx......

这些状态容器的区别是什么呢？

百度一下，你就知道

Redux有哪些优缺点呢？

优点：心照不宣

缺点：改动的话需要同时改动四个文件。（可以通过中间件redux-sage简化，后期讲解）

摘抄并简单介绍Redux的基本概念工作原理。

1.store

Store就是保存数据的地方，可以看做成一个容器。整个应用只有一个Store。Redux提供createStore用来创建Store。

2.state

Store保存的所有数据，每个都是state。Store对象包含所有的数据。如果想要得到摸个时点的数据，就要对store生成快照，就叫做state，当前时刻的state可以通过store.getState()拿到。

Redux规定，一个state对应一个View。state变view变，反之亦然。

3.Action

State的变化，会导致View的变化。但是，用户是拿不到state的，用户只能接触到View。所以state的变化一定是View导致的。

View如何导致state发生变化呢？

View通过Action发出通知，将数据送达Store，再由Store改变state，state改变必然会引起View的改变。

4.ActionCreator

View通过Action发送消息，每发送一个不同的Action，都要创建一个Action。所以要定义ActionCreator函数。并通过ActionType来判断。

5.store.dispatch()

dispatch是View发出Action的唯一方法。

dispacth接收一个Action参数，并将它发送出去。

6.reducer

Store接收到Action以后，会给出一个新的state，这样View才能发生变化，这种state的计算过程就叫做reducer。

当dispatch发送来action的时候，会自动触发reducer的执行，为什么会自动触发呢？因为在创建Store时传入了reducer。

reducer是纯函数，纯函数就是拿到同样的数据会返回同样的输出。

由于整个应用只有一个Store所以必然导致reducer跟着庞大，所以就要对reducer进行拆分。拆分方法见Demo。

7.store.subscribe

Store 允许使用store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。

import { createStore } from 'redux';const store = createStore(reducer);store.subscribe(listener);

显然，只要把 View 的更新函数（对于 React 项目，就是组件的render方法或setState方法）放入listen，就会实现 View 的自动渲染。

store.subscribe方法返回一个函数，调用这个函数就可以解除监听。

let unsubscribe = store.subscribe(() => console.log(store.getState()));unsubscribe();

工作原理图解：

初步认识Redux完成。