小程序使用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地址連接

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