The native applet Redux support library is available. Welcome to Star Minapp – Redux 🌹🌹🌹

You can also directly introduce NPM/Minapp-redux via NPM

Writing in the front

Small programs can make a mess by using setData for each page or component, plus various parent, sibling, grandparent, and so on. When you add components across pages, it can be very difficult to maintain and debug.

State management solutions in the native applet ecosystem are few and far between, and their ease of use is questionable (no modularity, no updates for years, code intrusion, etc.).

In the past, I’ve written a library called Miniprogram-Sync-State for the management of native small program ecology. This library is fine for small projects, but it can be too thin for large projects (lack of modularity is a major problem).

Based on the principle of not repeating the wheel, so he wrote a redux link library, in the micro channel small program can also be happy to use redux!

With 100 lines of code, you can have:

  • Full Redux support (modularity, asynchronous data flow flow, strong ecology) 🔥🔥

  • Connect with native Page object structure, similar to React-Redux (low learning cost, easy migration solution) 🔥🔥

  • Minimum diff update 🔥🔥

  • Time travel is theoretically possible, but wechat developer tools do not support it

Implement ideas

Why redux

Redux is one of the best implementations of Flux, with a huge community support and great plugin support. And in contrast to vuex’s customisation, Redux, as a minimalist state management system (customisation via plug-ins), is naturally easy to transplant and fit into any framework. In fact, Minapp-Redux, as described in this article, can also be classified as one of redux’s custom plug-ins.

How do states map to views

The applet framework doesn’t have props like React, and because of the bridge syntax, only data data in the JS layer can map to WXML. The connect syntax of minapp-redux merges the object returned by the first argument (stateMapFunction) into the data defined by the Page object. The connect syntax of minapp-redux merges the object returned by the first argument (stateMapFunction) into the data defined by the Page object. The stateMap data overrides the duplicate data attribute defined in the Page object.

The runtime

Because of the applet specification, the data in data must be present when the Page object is initialized. The connect syntax provided by Minapp-Redux is called when the applet is initialized. Using Page(Connect (stateMapFun, methodMapFun)(pageObject)) syntax, pageObject preserves the integrity of your original Page object, making it easier to migrate projects or remove Minapp-redux. On subsequent changes in redux state, the Redux API subscribe to the changes and update the view with setData by saving the store instance.

Minimum DIFF update

Minapp-redux uses the diFF update mechanism, which is exclusive to small programs. When there is a property change, the stateMap returned by the new store will be compared with the current data in the Page object, and the collection of changed properties will be extracted (discarding properties with the same value) to ensure the minimum granularity of the update. It is important to note that sometimes we use extremely complex store objects as map attributes, and diff comparisons of these complex objects can be costly, so minapp-Redux uses a shallow comparison, and when the map data type is Object, the whole Object is assigned to update.

Full Redux support

As mentioned earlier, Minapp-Redux only exists as a custom plugin for Redux. It does not change any of the redux functionality. Any redux plugin that you need to use without browser support can be seamlessly incorporated into your Minapp-Redux project. Redux-logger, redux-Thunk, etc. You can also implement your own modular management redux based on your understanding of redux, such as my Github demo, which uses reduxUtils as a modular package for redux.

The specific implementation

Three simple apis are used to ensure the operation of the project, which has been used in several online projects. The detailed code can be viewed on github project:

Github.com/zoenleo/min…

use

The introduction of

  • NPM build

npm install minapp-redux --save

  • Directly introducing

Copy index.js from the project SRC folder to the project

API

const { use, connect, connectComponent } = require(' minapp-redux')

 /**
 * use
 * @param {Object} Store
 */

/**
* connect
* @param {Function} mapStateToData
* @param {Function} mapMethodToPage
* @return {Function}
*/

/**
 * connectComponent
 * @param {Function} mapStateToData
 * @param {Function} mapMethodToPage
 * @return {Function}
 */

Copy the code

use

Into the story

// app.js
import { use } from 'minapp-redux'

// redux Store
import Store from '.. /.. /store/index'

//inject Store
use(Store)

App({
    onLaunch() {}
})

Copy the code

Page link

// pages/login/index.js
import { connect } from '.. /.. /libs/minapp-redux'
import * as Actions from '.. /.. /store/userInfo/actions.js'

const stateMap = state= > {
    const { userInfo } = state
    return {
        hasLogin: userInfo.hasLogin,
        userName: userInfo.userName
    }
}

const methodMap = (dispatch, state) = > ({
    login(userName) {
        dispatch(
            Actions.login({
                hasLogin: true,
                userName
            })
        )
    }
})

const page = {
    data: {
        username: ' '
    },
    bindUserNameChange(e) {
        this.setData({
            username: e.detail.value
        })
    },
    bindLogin() {
        if (!this.data.username) return
        this.login(this.data.username)
        wx.navigateBack({
            delta: 1
        })
    }
}

Page(
    connect(
        stateMap,
        methodMap
    )(page)
)

Copy the code

Here’s the demo code

The end of the

Finally, let’s make an advertisement for shenzhen Qianhai Webank to recruit a front-end development engineer.

Interested can give me a message, or send a resume to my email: [email protected].

Come and join us!

— The End