How to Seamlessly Update List Data After Editing in WeChat Mini Programs

Scenario

Assume there are two pages: a user list page and an information edit page. After clicking a user in the list, the edit page opens. When the user information is modified and the app returns to the list page, the list must display the updated information (e.g., changing “李四” to “李六” should make the second record show “李六”).

How to update?

One approach is to reload the list in the onShow lifecycle event, requesting fresh data each time the page appears. However, this can cause poor user experience, especially when the edited item is deep in a paginated list.

Another approach is to cache the modified user ID and data after saving, then read the cache in the list page’s onShow handler and directly modify the existing list data.

Solution

A more elegant method is to use a broadcast mechanism.

The list page sets up a listener, and the edit page sends a broadcast after the modification.

List page

const broadcast = require("../../utils/broadcast")

...

onLoad: function (options) {
    // Set broadcast listener
    broadcast.on("broadcast_user_modified", (data) => {
        // Handle logic
        ...
    });
}

...

Edit page

const broadcast = require("../../utils/broadcast")
...

// Broadcast
broadcast.fire("broadcast_user_modified", 
    {
        userid: user_id,
        ...
    }
)
...

When the list page receives the broadcast, it updates the list data using setData, so the list already shows the latest information when returning from the detail page.

Summary

The broadcast tool is a tiny yet practical utility for passing messages between different pages, making data synchronization simple and efficient.

Project address:

https://github.com/binnng/broadcast.js