小程序使用redux管理状态

1、前言：

随着页面的应用开发愈来愈复杂，js须要管理比任什么时候候都多的state(状态），管理不断变化的状态很是困难，假设一个model的变化会引发另外一个model的变化，那对应的view变化时就有可能引发model与model的变化，依次下来，状态就变得很是不可控，有时候你都搞不清发生了什么，当你须要去开发新的功能或者重现问题的时候，就会变得很是困难.

2、原生小程序是如何管理state?

原生小程序管理数据都是在globalData里面初始化数据：

• 一是：全局经过watch函数来订阅数据的变化，且在使用该数据的页面也需用引入对应的watch函数；
• 二是：直接引入app.js的globalData，经过app.XXX的这种方式去引入数据；
• 缺点：两种较为原生简朴的方法均是经过不停的setData去更新视图。一旦状态变动量大，且状态变动频繁的时候，状态的维护就会变得很鸡肋，也会形成代码可维护差、性能低下、页面卡顿等不可预估的问题。

3、为何是redux？

redux是一个javaScript的状态容器，提供可预测化的状态管理。咱们能够清晰的知道早先的state是什么，改变视图的state是什么，较为方便的把握数据流向，天然也知道对应的视图变化，nice!!!

• store:单一数据源：

整个应用的state都存在一颗object tree中，而在这个object tree中只存在惟一的store。

• state是只读的：

想要改变state只能经过dispatch一个action，action是一个用于描述发生了什么事情的普通对象。

• 使用纯函数来进行修改

reducer是一纯函数，用来接收先前的state和action，并返回一个新的state。

简单介绍一下redux的三大核心，这里并不对redux的基础使用方法进行过多的阐述，哈哈哈哈，主要目标不要忘记：咱但是要在小程序中引入redux这个大蛋糕呢。有对redux的基础感兴趣的童鞋能够自行点击去查看哈。

Redux 中文文档

阮一峰redux入门教程

4、如何在小程序中引入redux?

一、全局安装redux

npm i redux -g

二、引入其余相关库（可选择npm 安装）

• redux.js(核心文件，必选) - npm i redux
• redux-logger( 打印日志用的，必选) - npm i redux-logger
• mina-redux.js(核心文件，把redux的dispatch和仓库数据同步到页面上，必选)

注意：经过npm 安装的相关库，都会放在node_modules。

三、新建lib文件夹，将node_modules中对应的模块下的dist文件中的核心文件统一放入lib文件中，后期统一引入对应的页面中去。

四、先写redux的initState、type、action、reducer。

五、咱们须要去处理一下数据源store,在lib文件夹中新建store.js文件。

六、小程序的入口文件是app.js,因此在app文件中将页面（view)，store，state三者结合起来。

七、页面中怎么使用？

八、这里就大功告成啦，就能够在输出台看到对应的日志和action相关信息啦。搭建起来之后，后续的业务处理也是同样的方式啦！！！效果以下：

5、结尾

小程序中引入redux大概就是这样子，调用api没有单独抽出来在redux-saga中处理，处理reducer这一块数据内容也没有再额外封装起来，其实更好的仍是应该再单独封装一个模块。这样也就不用在页面去调用api，直接在saga中处理好。哈哈哈哈，简单的就到这里吧，望指点一二。

6、最后

疑问：一直想用saga将样板代码action结合起来，不要仍是switch去区分action,害，奈何技术不行啊，但愿有大佬指明一条出路啊，跪谢！！！

具体代码附上：gitHub地址连接

撒花撒花撒花✿✿ヽ(°▽°)ノ✿