支付宝小程序 Redux Binding

支付宝小程序于 2017.08 月开始公测，它是一种全新的开放模式，运行在支付宝客户端，可以被便捷地获取和传播，为终端用户提供更优的用户体验。

同时，支付宝小程序也为开发者提供了丰富的开发资源，包括开发 IDE，小程序组件，丰富的 JSAPI 和开放接口，以及各种调试工具和最佳开发实践等等。但是，我们团队在开发时仍然会遇到很多问题，本篇主要讨论如何解决整个小程序 Web App 的状态管理。

目前，团队里面很多前端同学都是有 React + Redux 开发技术背景，所以第一考虑就是提供基于支付小程序的 Redux Binding，以便无缝对接，快速开发，没有学习成本。

我们希望它能提供如下的功能：

• 提供和 react-redux 一样简单方便的 API (Provider & connect)
• 同时支持 Component 和 Page

然后就有了 tinyapp-redux 😃 ，那么，它是如何和支付宝不程序协调工作，来帮我们统一管理数据流的呢？原理与 react-redux 异曲同工，还是分二步走：

Installation #

npm install --save tinyapp-redux

Provider #

tinyapp-redux 提供了 Provider ，它可以让 Redux store 在其它的小程序页面或是组件中都可以直接 connect 自己需要的数据。

app.js

import { Provider } from 'tinyapp-redux'
import store from './createStore'

App(
  Provider(store)({
    onLaunch(options) {
      // 小程序初始化
    },
    ...
  }),
)

createStore.js

import { createStore, applyMiddleware } from 'redux'
import logger from 'redux-logger'
import rootReducer from './reducers'

const initState = {
  todos: [
    { id: 1, text: 'Learning Javascript', completed: false },
    { id: 2, text: 'Learning ES2019', completed: true },
    { id: 3, text: 'Learning 支付宝小程序', completed: true },
  ],
}

const store = createStore(rootReducer, initState, applyMiddleware(logger))


export default store

或者通过默认提供的 injectStore 函数来注入当前 store

app.js

import { createStore, applyMiddleware } from 'redux'
import { injectStore } from 'tinyapp-redux'
import logger from 'redux-logger'

import rootReducer from './reducers'

const initState = {
  todos: [
    { id: 1, text: 'Learning Javascript', completed: false },
    { id: 2, text: 'Learning ES2019', completed: true },
    { id: 3, text: 'Learning 支付宝小程序', completed: true },
  ],
}

App({
  onLaunch() {
    this.store = createStore(rootReducer, initState, applyMiddleware(logger))

    injectStore(this.store) // inject the store into the tiny app
  },
})

Connect #

tinyapp-redux 提供了一个 connect 函数，用于绑定小程序页面/组件到 Redux store ，从而很方便地去获取任何需要的数据。

import { connect } from 'tinyapp-redux'

import {
  toggleTodo,
  setVisibilityFilter,
  VisibilityFilters,
} from '../../actions'
import { getVisibleTodos } from '../../reducers'

const mapStateToProps = state => ({
  todos: getVisibleTodos(state, state.visibilityFilter),
})

Page(
  connect(
    mapStateToProps,
    { toggleTodo },
    {
      data: { VisibilityFilters },
      onTodoChanged(e) {
        this.data.toggleTodo(e.target.dataset.id)
      },
      addTodo() {
        my.navigateTo({ url: '../add-todo/add-todo' })
      },
    },
  ),
)

tinyapp-redux 可以帮助我们管理支付宝小程序的数据流，那么如何组织整个代码结构? Stay tuned!