微信小程序redux库 swx-tcff

注意：本库会用到regeneratorRuntime，需安装开发者工具最新版，开启“增强编译”

支持redux

1. 初始化app

import { tcff } from 'swx-tcff'
// 创建app
const app = tcff.getApp()

app.use({
  // 基于swx-request实现的service
  api: apiMap,
  hooks: {
    error(e) {
      // 处理异常
      console.error(e)
    }
  }
})
// 加载model
app.use(appModel)

// 启动app
app.start()


App({
  ...app,

  onLaunch() {
    app.store.dispatch({ type: 'app/init' })
  },
  onShow(res) {
    app.store.dispatch({ type: 'app/change', payload: { showInfo: res } })
  }
})

2. apiMap范例

export default {
  login: 'post userLogin',
}

3. model范例 默认action

• change 普通更新
• replace 整个替换
• reset 重置
• patch 列表补丁更新 payload: { key, data, compare }

// model.js
// 本库会用到regeneratorRuntime，需安装开发者工具最新版，开启“增强编译”
import { swx } from 'swx-util'

export default {
  namespace: 'app',
  state: {
    isReady: false
  },
  flows:{
    * login(_, { call, put, callAction }) {
      // 登录
      const { code } = yield call(swx.login)
      yield put({ type: 'change', payload: { code } })
      // 获取用户信息
      const { authSetting } = yield call(swx.getSetting)
      if (authSetting['scope.userInfo']) {
        const { userInfo, encryptedData, iv } = yield call(swx.getUserInfo, { lang: 'zh_CN' })
        yield put({ type: 'change', payload: { userInfo, encryptedData, iv } })
        yield callAction({ type: 'loginService' })
      } else {
        // 未授权
        yield put({ type: 'change', payload: { authUserInfo: false } })
      }
    },
    * loginService(_, { call, put, select, context: { service } }) {
      const { code, encryptedData, iv } = yield select(state => state.app)
      const { success, data } = yield call(service.login, {
        JsCode: code,
        EncryptedData: encryptedData,
        Iv: iv
      })
      if (success) {
        yield put({ type: 'change', payload: { openId: data.OpenId, unionId: data.UnionId } })
      } else {
        yield put({ type: 'change', payload: { loginError: JSON.stringify(data) } })
        console.error(data)
      }
      yield put({ type: 'change', payload: { isReady: true } })
    }
  }

4. Page范例

// page.js
import { Page } from 'swx-tcff'
import model, { namespace } from './model'

Page(model, state => ({
  ...state.app, ...state[namespace]
}), {
  onLoad(){
   this.dispatch({ type: `${namespace}/init` })
  },
  // model中的state更新时执行
  onStateChange(prevState) {
    const { loading } = this.data
    if(prevState.loading !== loading){}
  }
})

// model.js
export default {
  namespace: 'userOrder',
  state: {
    loading: false
  },
  flows:{
    * init(_, { call, put, callAction }) {
        // ...
    }
  }
}

其他

小程序专用库，详情参考npm构建文档

注意：

1. 不需要babel编译
2. "miniprogram": "src" 专用目录
3. 模块路径必须写全，比如：'./wxapi/index',index不能省略