一個Time TodoList實例瞭解redux在wepy中的使用

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

wepy-redux-time-todo

Use github地址

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

npm install

npm run dev

添加到微信開發者工具裏便可運行

Wiki

建立項目

wepy是騰訊自出的一套小程序框架，基於Vue寫法，也能夠靈活使用第三方庫，對原生的api也作了部分優化，提升了總體代碼的可讀性和可維護性，也極大的提升了開發效率，極力推薦使用。首先須要安裝wepy命令，經過命令建立wepy項目，在執行下面第二句命令過程當中會有一些問題，在到是否使用redux的問題時選y，在建立時就會加入redux依賴以及store文件夾

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

wepy init standard wepy-redux-time-todo // 建立wepy-redux-time-todo項目

項目結構

執行建立命令後會出現相似如下結構的項目結構(下面是我本身建立文件後的)

|-- dist // 編譯後執行文件夾
 |-- node_modules
 |-- src // 開發文件夾
 |   |-- components //組件
        |-- sec-title.wpy
     |-- pages //業務頁面
        |-- index.wpy
     |-- store // redux
        |-- actions
            |-- index.js
        |-- reducers
            |-- timeReducer.js
            |-- index.js //合併reducer
        |-- types
            |-- index.js
     |-- style //樣式
        |-- weui.scss
     |-- app.wpy //入口
 |-- package.json

Redux概念以及使用

Redux主要的做用是管理複雜的數據，多用於操做單頁應用中的複雜狀態，將整個應用的狀態集中放在一個容器裏統一管理。做爲一個狀態容器，他就像一個盒子(store)，這個惟一的盒子(整個應用只有一個store)裏有不少狀態(state), 都以一個對象樹的形式儲存在store 中。 惟一能改變 state 的辦法是觸發 action，action是一個簡單的對象，用來描述你想要幹什麼。reducer是一個純函數來根據action返回的type操做狀態變化返回新狀態，reducer做爲createStore參數返回最新的store，下面咱們經過redux官網的代碼具體描述redux的執行過程，

Action

action能夠理解爲動做，用戶但願幹什麼，好比點擊一個按鈕讓頁面的數字加1，切換日期，插入數組等，總之是一個但願頁面狀態發生改變的行爲標識。action用一個對象表示,包含一個必須屬性type

{type:"INCREMENT"} //表示添加動做
{type:"DECREMENT"} //表示減法動做
{type:"GET_DATA",payload:{}} // 表示獲取數據動做並掛載一個數據在payload屬性上供reducer使用，多用於異步獲取數據，也能夠用本身的添加其餘屬性

Reducer

reducer是一個形式爲 (state, action) => state 的純函數（純函數概念：不依賴外部環境變量，只依賴內部參數、不會產生反作用、相同的輸入確保相同的輸出）。描述了 action 如何把 state 轉變成下一個 state。state 的形式取決於你本身，能夠是基本類型、數組、對象、甚至是 Immutable.js 生成的數據結構。惟一的要點是當 state 變化時須要返回全新的對象，而不是修改傳入的參數。
下面例子使用 switch 語句和字符串來作判斷，也能夠用本身的方式。

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

store

redux的createStore方法用於建立應用惟一的store，createStore方法的參數即reducer，用於更新store內state樹，經過如下建立就能夠把一個初始的{state:0}的這樣一個狀態存入到store中

import { createStore } from 'redux';

const store = createStore(reducer);

store有幾個重要的方法

• store.dispatch(action) //派發事件 表示要幹什麼
• store.getState() // 獲取存儲在store裏的全部狀態(數據)
• store.subscribe(listener) //手動監聽狀態變化

dispatch改變狀態

store.dispatch是改變狀態的惟一方式，dispatch接受一個action參數（作什麼），通知reducer須要作出什麼樣的改變，再更新整個store

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

這個操做會告訴reducer 當前須要給state作加1操做，

獲取state

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

subscribe監聽

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

在dispatch觸發狀態更新後須要經過subscribe監聽才能得到最新的狀態，若是在react中使用則須要把視圖渲染函數放在監聽函數內。

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

以上是純redux的使用，使用起來比較雞肋，redux大量被使用在react項目中，封裝庫react-redux提供的Provider和connect能夠將react和redux完美結合，使用很是方便。

Redux在wepy中的使用

經過上面的描述應該對redux有了必定的瞭解，接下來咱們看下redux在小程序框架wepy中如何使用，wepy中須要安裝wepy-redux依賴，相似react-redux，store文件夾下放redux的操做代碼，redux的使用方法都相同，這裏咱們講下與react使用不同的地方

初始化store

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

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

const store = configStore()
setStore(store)

wepy中app.wpy編譯後爲原生小程序中的app.js，app.js在小程序整個執行生命週期裏處於最前端，在小程序初始化時來建立store，這樣在全部頁面均可以使用，等同於react裏的Provider

redux-actions

這裏使用redux-actions庫來優化reducer裏的switch寫法。

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

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

connect鏈接到wepy組件上

connect(states, actions) connect有兩個參數，states是整個應用的狀態，頁面須要使用哪一個狀態對應獲取該狀態便可,actions業務操做，是wepy-redux對action的封裝，這裏咱們不用這種方式，本身在action中手動dispatch，若是想要了解詳細使用可參考wepy-redux

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

使用數據

<template lang="wxml">
    <repeat for="{{timeConfigData}}" index="index" item="item" key="key">
    </repeat>
</template>

其餘方法都與在react中使用相同，經過上面的配置就能夠在wepy中使用redux了，詳細代碼參考 code