小程序使用redux管理状态

·  阅读 430

一、前言:

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

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

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

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

三、为什么是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入门教程

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

1、全局安装redux

npm i redux -g

2、引入其他相关库(可选择npm 安装)

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

注意:通过npm 安装的相关库,都会放在node_modules。


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


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


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


6、小程序的入口文件是app.js,所以在app文件中将页面(view),store,state三者结合起来。


7、页面中怎么使用?


8、这里就大功告成啦,就可以在输出台看到对应的日志和action相关信息啦。搭建起来以后,后续的业务处理也是一样的方式啦!!!效果如下:



五、结尾

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

六、最后

疑问:一直想用saga将样板代码action结合起来,不要还是switch去区分action,害,奈何技术不行啊,希望有大佬指明一条出路啊,跪谢!!!

具体代码附上:gitHub地址链接

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





分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改