摘要：描述了如何把轉(zhuǎn)變成下一個(gè)。唯一的要點(diǎn)是當(dāng)變化時(shí)需要返回全新的對(duì)象，而不是修改傳入的參數(shù)。以上是純的使用，使用起來(lái)比較雞肋，大量被使用在項(xiàng)目中，封裝庫(kù)提供的和可以將和完美結(jié)合，使用非常方便。

@subject: wepy-redux-time-todo
@author: leinov
@date:2018-10-30

git clone git@github.com:leinov/wepy-redux-time-todo.git

npm install

npm run dev

添加到微信開(kāi)發(fā)者工具里即可運(yùn)行

wepy是騰訊自出的一套小程序框架，基于Vue寫(xiě)法，也可以靈活使用第三方庫(kù)，對(duì)原生的api也做了部分優(yōu)化，提高了整體代碼的可讀性和可維護(hù)性，也極大的提高了開(kāi)發(fā)效率，極力推薦使用。首先需要安裝wepy命令，通過(guò)命令創(chuàng)建wepy項(xiàng)目，在執(zhí)行下面第二句命令過(guò)程中會(huì)有一些問(wèn)題，在到是否使用redux的問(wèn)題時(shí)選y，在創(chuàng)建時(shí)就會(huì)加入redux依賴(lài)以及store文件夾

npm install wepy-cli -g //安裝全局wepy命令

wepy init standard wepy-redux-time-todo // 創(chuàng)建wepy-redux-time-todo項(xiàng)目

執(zhí)行創(chuàng)建命令后會(huì)出現(xiàn)類(lèi)似以下結(jié)構(gòu)的項(xiàng)目結(jié)構(gòu)(下面是我自己創(chuàng)建文件后的)

 |-- dist // 編譯后執(zhí)行文件夾
 |-- node_modules
 |-- src // 開(kāi)發(fā)文件夾
 |   |-- components //組件
        |-- sec-title.wpy
     |-- pages //業(yè)務(wù)頁(yè)面
        |-- index.wpy
     |-- store // redux
        |-- actions
            |-- index.js
        |-- reducers
            |-- timeReducer.js
            |-- index.js //合并reducer
        |-- types
            |-- index.js
     |-- style //樣式
        |-- weui.scss
     |-- app.wpy //入口
 |-- package.json

Redux主要的作用是管理復(fù)雜的數(shù)據(jù)，多用于操作單頁(yè)應(yīng)用中的復(fù)雜狀態(tài)，將整個(gè)應(yīng)用的狀態(tài)集中放在一個(gè)容器里統(tǒng)一管理。作為一個(gè)狀態(tài)容器，他就像一個(gè)盒子(store)，這個(gè)唯一的盒子(整個(gè)應(yīng)用只有一個(gè)store)里有很多狀態(tài)(state), 都以一個(gè)對(duì)象樹(shù)的形式儲(chǔ)存在store 中。 唯一能改變 state 的辦法是觸發(fā) action，action是一個(gè)簡(jiǎn)單的對(duì)象，用來(lái)描述你想要干什么。reducer是一個(gè)純函數(shù)來(lái)根據(jù)action返回的type操作狀態(tài)變化返回新?tīng)顟B(tài)，reducer作為createStore參數(shù)返回最新的store，下面我們通過(guò)redux官網(wǎng)的代碼具體描述redux的執(zhí)行過(guò)程，

action可以理解為動(dòng)作，用戶(hù)希望干什么，比如點(diǎn)擊一個(gè)按鈕讓頁(yè)面的數(shù)字加1，切換日期，插入數(shù)組等，總之是一個(gè)希望頁(yè)面狀態(tài)發(fā)生改變的行為標(biāo)識(shí)。action用一個(gè)對(duì)象表示,包含一個(gè)必須屬性type

{type:"INCREMENT"} //表示添加動(dòng)作
{type:"DECREMENT"} //表示減法動(dòng)作
{type:"GET_DATA",payload:{}} // 表示獲取數(shù)據(jù)動(dòng)作并掛載一個(gè)數(shù)據(jù)在payload屬性上供reducer使用，多用于異步獲取數(shù)據(jù)，也可以用自己的添加其他屬性

reducer是一個(gè)形式為 (state, action) => state 的純函數(shù)（純函數(shù)概念：不依賴(lài)外部環(huán)境變量，只依賴(lài)內(nèi)部參數(shù)、不會(huì)產(chǎn)生副作用、相同的輸入確保相同的輸出）。描述了 action 如何把 state 轉(zhuǎn)變成下一個(gè) state。state 的形式取決于你自己，可以是基本類(lèi)型、數(shù)組、對(duì)象、甚至是 Immutable.js 生成的數(shù)據(jù)結(jié)構(gòu)。唯一的要點(diǎn)是當(dāng) state 變化時(shí)需要返回全新的對(duì)象，而不是修改傳入的參數(shù)。
下面例子使用 switch 語(yǔ)句和字符串來(lái)做判斷，也可以用自己的方式。

function reducer(state = 0, action) {
  switch (action.type) {
  case "INCREMENT":
    return state + 1;
  case "DECREMENT":
    return state - 1;
  default:
    return state;
  }
}

redux的createStore方法用于創(chuàng)建應(yīng)用唯一的store，createStore方法的參數(shù)即reducer，用于更新store內(nèi)state樹(shù)，通過(guò)以下創(chuàng)建就可以把一個(gè)初始的{state:0}的這樣一個(gè)狀態(tài)存入到store中

import { createStore } from "redux";

const store = createStore(reducer);

store有幾個(gè)重要的方法

store.dispatch(action) //派發(fā)事件 表示要干什么

store.getState() // 獲取存儲(chǔ)在store里的所有狀態(tài)(數(shù)據(jù))

store.subscribe(listener) //手動(dòng)監(jiān)聽(tīng)狀態(tài)變化

store.dispatch是改變狀態(tài)的唯一方式，dispatch接受一個(gè)action參數(shù)（做什么），通知reducer需要做出什么樣的改變，再更新整個(gè)store

store.dispatch({INCREMENT:"INCREMENT"}) 

這個(gè)操作會(huì)告訴reducer 當(dāng)前需要給state做加1操作，

store.getState() // {state:1}

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

在dispatch觸發(fā)狀態(tài)更新后需要通過(guò)subscribe監(jiān)聽(tīng)才能獲得最新的狀態(tài)，如果在react中使用則需要把視圖渲染函數(shù)放在監(jiān)聽(tīng)函數(shù)內(nèi)。

import store from "./redux.js"
store.subscribe(()=>{
  ReactDOM.render(, document.getElementById("root"))
});

以上是純r(jià)edux的使用，使用起來(lái)比較雞肋，redux大量被使用在react項(xiàng)目中，封裝庫(kù)react-redux提供的Provider和connect可以將react和redux完美結(jié)合，使用非常方便。

通過(guò)上面的描述應(yīng)該對(duì)redux有了一定的了解，接下來(lái)我們看下redux在小程序框架wepy中如何使用，wepy中需要安裝wepy-redux依賴(lài)，類(lèi)似react-redux，store文件夾下放redux的操作代碼，redux的使用方法都相同，這里我們講下與react使用不一樣的地方

首先需要在app.wpy中初始化store

import { setStore } from "wepy-redux"
import configStore from "./store"

const store = configStore()
setStore(store)

wepy中app.wpy編譯后為原生小程序中的app.js，app.js在小程序整個(gè)執(zhí)行生命周期里處于最前端，在小程序初始化時(shí)來(lái)創(chuàng)建store，這樣在所有頁(yè)面都可以使用，等同于react里的Provider

這里使用redux-actions庫(kù)來(lái)優(yōu)化reducer里的switch寫(xiě)法。

import { handleActions } from "redux-actions";
import {
    TIME_CONFIG_DATA, // 學(xué)員
} from "../types/index";

export default handleActions({
    [TIME_CONFIG_DATA](state, action) {
        return {
            ...state,
            timeConfigData: action.newData
        };
    }
}, {
    timeConfigData:[], //state初始值 
});

connect(states, actions) connect有兩個(gè)參數(shù)，states是整個(gè)應(yīng)用的狀態(tài)，頁(yè)面需要使用哪個(gè)狀態(tài)對(duì)應(yīng)獲取該狀態(tài)即可,actions業(yè)務(wù)操作，是wepy-redux對(duì)action的封裝，這里我們不用這種方式，自己在action中手動(dòng)dispatch，如果想要了解詳細(xì)使用可參考wepy-redux

import { connect } from "wepy-redux"
 @connect({
    timeConfigData(state) {
      return state.timeReducer.num
    }
  })
  export default class Index extends wepy.page {
      // ...
    methods = {
      // ...
    }
    // ...
    onLoad() {
    }
  }

使用數(shù)據(jù)

其他方法都與在react中使用相同，通過(guò)上面的配置就可以在wepy中使用redux了，詳細(xì)代碼參考code