Wechat small program market is further expanding, and behind the technical community is still groping for the best practice. I help Nike, wal-mart and some startup after the development of small programs, still believe that using small native framework is a more efficient and stable choice, while the use of the native framework only without a good library of state management, if not the introduction of state management can let us in a modular, the project structure, and some are unit tests.

At present the relatively more robust approach is to redux or MOBx do an Adaptor application into the small program, but this need to find their own way to package the introduction of external libraries, but also want to write this adaptor, always seem to be some trouble. So I came up with the idea of writing a state management library dedicated to applets that was simple enough to use and could be installed through the applets’ own NPM mechanism.

So far I have developed two e-commerce applets using this open source library, which has improved my development efficiency and ensured the performance of the application, so I want to talk about the idea behind this to inspire more developers to try new solutions.

Implement state management based on Proxy

Proxy is well supported in applets, and I haven’t found any cases where Proxy can’t be used on iPhone or Android. Proxy based state management is actually a subscription listening mode, on the one hand to listen for changes in data, on the other hand to communicate these changes to the subscription applets page.

As a common example, when a user enters the user edit page from their home page and changes their user name, click Save, the user name on both the home page and the user edit page should be updated. The logic behind this is that updating this behavior triggers the Proxy to notify the state management library, which then checks all pages that are still in the page stack and updates the pages that have subscribed to the user name, as shown below:

Part1: Monitoring data changes

In fact, to monitor the change of data is to monitor the change of properties of each Store, which is realized by adding a layer of Proxy in front of each Store, which is represented by a more intuitive picture like this:

When a Store is observed, its properties become Proxy instances. When the property value is Object or Array, its internal values are also wrapped as Proxy instances, so that no matter how deep the data changes can be monitored. After Proxy, Store attributes are actually maintained by another set of data (the purple part), which is not responsible for monitoring, but pure data. Any changes to attributes will be applied to this set of data, which is used to maintain and return the latest data.

Implementation details: github.com/wwayne/mini…

Part2: Page data binding

Since the js in each Page of the applet is passing an object to the Page, this gives us the opportunity to wrap the object to achieve: 1. After entering the page, save the page in the page stack 2. Map the data from the state management library to the data of this page 3. When the page exits, the page is removed from the page stack

Implementation details: github.com/wwayne/mini…

Part3: Page subscription updates

When data is monitored for changes, we need to do two things in sequence, first find all the pages stored in the page stack, then check the changes according to the data subscribed by each page, notify these pages if there is any change, so that they can trigger setData to update the page.

Implementation details: github.com/wwayne/mini…

Examples of using state management

With the status management library, we will now implement the operation we started with the example of updating user information. Our file path is as follows:

stores/
  user.js
pages/
  userEdit/
     index.js
     index.wxml
Copy the code
  1. First we create a Store to Store the user’s information and listen for it to change:
// stores/user.js
import { observe } from 'minii'

Class UserStore {
  constructor () {
     this.name = 'bob'
  }

  changeName (name) {
     this.name = name
  }
}

export default observe(new UserStore(), 'user')
Copy the code
  1. Then subscribe to Store information on our applet page
// pages/userEdit/index.js
import { mapToData } from 'minii'
import userStore from '.. /.. /stores/user'

const connect = mapToData(state= > (({
  myName: state.user.name
}))
Page(connect({
  updateNameToJames () {
    userStore. changeName('james')}}))Copy the code
  1. Done, you can now use and update your data in the page
// pages/userEdit/index.wxml
<text>{{ myName }}</text>
<button bindtap="updateNameToJames">update name to James</button>
Copy the code

The last

Because the small program has the limitation of the volume, so I hope to do as much as possible in the code volume light and convenient, so the current state management library does not have too many very complex functions, after the small program is packaged, the volume is less than 1KB, quite enough meaning.

I have also developed two small programs with it, and after a period of user experience, I am more confident that this solution will work in small programs. If you have any ideas or suggestions, please let me know.

Lot of the project: github.com/wwayne/mini…

About me

Hi, I am Wwayne, an independent software engineer living in Shanghai. I am developing my new product talk-to-kim. You can find me on Github or column writing code by myself