@lensung/miniapp-rematch

让你的支付宝小程序接入 rematch。

安装

npm install @lensung/miniapp-rematch

or

yarn add @lensung/miniapp-rematch

使用

1. 创建 models

// count.js

export const count = {
  state: 0, // initial state
  reducers: {
    // handle state changes with pure functions
    increment(state, payload) {
      return state + payload
    },
  },
  effects: (dispatch) => ({
    // handle state changes with impure functions.
    // use async/await for async actions
    async incrementAsync(payload, rootState) {
      await new Promise((resolve) => setTimeout(resolve, 1000))
      dispatch.count.increment(payload)
    },
  }),
}

最佳实践是创建 models 文件夹，创建文件 index.js

// index.js

export * from './count'
export * from './xxx'

2. 初始化 store 在 app.js 中

import { initStore, Provider } from '@lensung/miniapp-rematch'
import * as models from './models' // 第 1 步中创建的 models 文件夹

const store = initStore({ models })

App(
  Provider(store)({
    onLaunch() {
      // ...
    }
  })
)

3. 在你的 Page 文件或 Component 文件内 connect

import { connect } from '@lensung/miniapp-rematch'

const mapState = (state) => ({
  count: state.count,
})
const mapDispatch = (dispatch) => ({
  increment: () => dispatch.count.increment(1),
  incrementAsync: () => dispatch.count.incrementAsync(1),
})

Page(
  connect(
    mapState,
    mapDispatch
  )({
    data: {},
    onLoad() {},
    // ...
  })
)

至此 @lensung/miniapp-rematch 会帮你把 mapState 返回的 state 绑定到 Page 组件的 data 上，store 更新时 data 也会自动更新。

至于 mapDispatch 返回的 dispatch，Page 组件会将 dispatch 注入上 this 上下文中，Component 组件则会注入到 methods 中。