TypeScript mobx-state-tree.onSnapshot函數代碼示例

    hydrate: flow(function* () {

      if (__DEV__) {
        // Inspect individual models
        makeInspectable(self);
        makeInspectable(Movies);
        makeInspectable(InTheaters);
        makeInspectable(Genres);
      }

      const storageKey = 'Store.settings';
      const data = JSON.parse(yield AsyncStorage.getItem(storageKey));
      if (data) {
        applySnapshot(self.settings, data);
      }

      onSnapshot(self.settings, debounce(
        snapshot => AsyncStorage.setItem(storageKey, JSON.stringify(snapshot)),
        1200,
      ));

      // Load all supplimental data
      Genres.loadAllGenres();
      Cinemas.loadAllCinemas();

      self.isHydrated = true;
    }),

    .actions(self => {
        let targetStore: any
        let snapshotDisposer: any
        let skipNextUndoState = false

        return {
            addUndoState(todos: any) {
                if (skipNextUndoState) {
                    // skip recording if this state was caused by undo / redo
                    skipNextUndoState = false
                    return
                }
                self.history.splice(self.undoIdx + 1)
                self.history.push(todos)
                self.undoIdx = self.history.length - 1
            },
            afterCreate() {
                targetStore = self.targetPath
                    ? resolvePath(self, self.targetPath)
                    : getEnv(self).targetStore
                if (!targetStore)
                    throw new Error(
                        "Failed to find target store for TimeTraveller. Please provide `targetPath`  property, or a `targetStore` in the environment"
                    )
                // TODO: check if targetStore doesn't contain self
                // if (contains(targetStore, self)) throw new Error("TimeTraveller shouldn't be recording itself. Please specify a sibling as taret, not some parent")
                // start listening to changes
                snapshotDisposer = onSnapshot(targetStore, snapshot =>
                    (self as any).addUndoState(snapshot)
                )
                // record an initial state if no known
                if (self.history.length === 0) (self as any).addUndoState(getSnapshot(targetStore))
            },
            beforeDestroy() {
                snapshotDisposer()
            },
            undo() {
                self.undoIdx--
                skipNextUndoState = true
                applySnapshot(targetStore, self.history[self.undoIdx])
            },
            redo() {
                self.undoIdx++
                skipNextUndoState = true
                applySnapshot(targetStore, self.history[self.undoIdx])
            }
        }
    })

    /**
     * Connects a mst tree node to Reactotron.
     *
     * @param node The node we want to track.
     * @param nodeName What to call this node.
     */
    function attachReactotronToMstNode(node: IStateTreeNode, nodeName?: string) {
      // whenever the snapshot changes, send subscriptions
      onSnapshot(node, sendSubscriptions)

      /**
       * Make some middleware that allows us to track actions.
       */
      addMiddleware(node, (call, next) => {
        // only actions for now
        const skip = call.type !== "action"

        // skip this middleware?
        if (skip) {
          return next(call)
        }

        // grab the arguments
        const args = convertUnsafeArguments(call.args)
        const path = getPath(call.context)

        // action related data
        const action = { args: args, name: call.name, path }

        // mst internal data
        const mstPayload = {
          id: call.id,
          parentId: call.parentId,
          rootId: call.rootId,
          type: call.type,
          modelType: getType(node),
          alive: isAlive(node),
          root: isRoot(node),
          protected: isProtected(node),
        }

        // start a timer
        const elapsed = reactotron.startTimer()

        // chain off to the next middleware
        const result = next(call)

        // measure the speed
        const ms = elapsed()

        // add nice display name
        const displayPath = replace(/^\./, "", replace(/\//g, ".", path))
        let name = replace(/^\./, "", `${nodeName ? nodeName : ""}${displayPath}.${call.name}()`)
        name = replace("/", ".", name)
        // fire this off to reactotron
        if (!restoring) {
          reactotron.send("state.action.complete", {
            name,
            action,
            mst: mstPayload,
            ms,
          })
        }

        // return the result of the next middlware
        return result
      })
    }

 subscribe: (listener: any) => mst.onSnapshot(model, listener)