本文整理匯總了TypeScript中mobx-state-tree.addMiddleware函數的典型用法代碼示例。如果您正苦於以下問題：TypeScript addMiddleware函數的具體用法？TypeScript addMiddleware怎麽用？TypeScript addMiddleware使用的例子？那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。
在下文中一共展示了addMiddleware函數的5個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: test
test("it logs", t => {
const Todo = mst.types
.model({
title: ""
})
.actions(self => ({
helper() {},
setTitle(newTitle) {
;(self as any).helper() // should not be logged
self.title = newTitle
}
}))
const Store = mst.types.model({
todos: mst.types.array(Todo)
})
const store = Store.create({
todos: [{ title: "test " }]
})
mst.addMiddleware(store, simpleActionLogger)
store.todos[0].setTitle("hello world")
t.deepEqual((console.log as any).args, [["[MST] /todos/0/setTitle"]])
})示例2: addMiddleware
.actions(self => {
addMiddleware(self, atomic)
return {
inc(x) {
self.z += x
return self.z
},
throwingFn(x) {
self.z += x
throw "Oops"
},
incProcess: flow(function*(x) {
yield delay(2)
self.z += x
yield delay(2)
self.z += x
return self.z
}),
throwingProcess: flow(function*(x) {
yield delay(2)
self.z += x
yield delay(2)
self.z += x
throw "Oops"
})
}
})示例3: test
test("it logs flows", async t => {
const Todo = mst.types
.model({
title: ""
})
.actions(self => ({
helper() {},
helper2: flow(function* helper2() {
return Promise.resolve(3)
})
}))
.actions(self => ({
setTitle: flow(function* setTitle(newTitle) {
self.helper() // should not be logged
yield self.helper2() // should be logged
self.title = newTitle
return
})
}))
const Store = mst.types.model({
todos: mst.types.array(Todo)
})
const store = Store.create({
todos: [{ title: "test " }]
})
mst.addMiddleware(store, actionLogger)
await store.todos[0].setTitle("hello world")
t.deepEqual((console.log as any).args.map(([x]) => x), [
"[MST] #5 action - /todos/0/setTitle",
"[MST] #5 flow_spawn - /todos/0/setTitle",
"[MST] #5 flow_spawn - /todos/0/helper2",
"[MST] #5 flow_return - /todos/0/helper2",
"[MST] #5 flow_return - /todos/0/setTitle"
])
})示例4: attachReactotronToMstNode
/**
* 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
})
}示例5: recordPatches
//.........這裏部分代碼省略.........
recorder: undefined,
actionId: undefined
}
) => recorder && recorder.resume(),
onSuspend: (
call,
{ recorder, actionId }: { recorder: any; actionId: any } = {
recorder: undefined,
actionId: undefined
}
) => recorder && recorder.stop(),
onSuccess: (
call,
{ recorder, actionId }: { recorder: any; actionId: any } = {
recorder: undefined,
actionId: undefined
}
) => {
if (recordingActionId === actionId) {
stopRecordingAction(recorder)
}
},
onFail: (
call,
{ recorder, actionId }: { recorder: any; actionId: any } = {
recorder: undefined,
actionId: undefined
}
) => recorder && recorder.undo()
})
return {
addUndoState(recorder: any) {
if (replaying) {
// skip recording if this state was caused by undo / redo
return
}
self.history.splice(self.undoIdx)
self.history.push({
patches: recorder.patches,
inversePatches: recorder.inversePatches
})
self.undoIdx = self.history.length
},
afterCreate() {
targetStore = getEnv(self).targetStore ? getEnv(self).targetStore : getRoot(self)
if (!targetStore || targetStore === self)
throw new Error(
"UndoManager should be created as part of a tree, or with `targetStore` in it's environment"
)
middlewareDisposer = addMiddleware(targetStore, undoRedoMiddleware)
},
beforeDestroy() {
middlewareDisposer()
},
undo() {
replaying = true
self.undoIdx--
// n.b: reverse patches back to forth
// TODO: add error handling when patching fails? E.g. make the operation atomic?
applyPatch(targetStore, self.history[self.undoIdx].inversePatches.slice().reverse())
replaying = false
},
redo() {
replaying = true
// TODO: add error handling when patching fails? E.g. make the operation atomic?
applyPatch(targetStore, self.history[self.undoIdx].patches)
self.undoIdx++
replaying = false
},
withoutUndo(fn: () => any) {
try {
skipping = true
flagSkipping = true
return fn()
} finally {
flagSkipping = false
}
},
withoutUndoFlow(generatorFn: () => any) {
return flow(function*() {
skipping = true
flagSkipping = true
const result = yield* generatorFn()
flagSkipping = false
return result
})
},
startGroup(fn: () => any) {
grouping = true
return fn()
},
stopGroup(fn: () => any) {
if (fn) fn()
grouping = false
;(self as any).addUndoState(groupRecorder)
groupRecorder = { patches: [], inversePatches: [] }
}
}
})