一个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