TypeScript mobx.reaction函数代码示例

    constructor(private queryToKey:(q:Query)=>string, // query maps to the key of the datum it will fill
                private dataToKey:(d:Data, m?:Metadata)=>string, // should uniquely identify the data - for indexing in cache
                private fetch:(queries:Query[], ...staticDependencies:any[])=>Promise<FetchResult<Data, Metadata>>,
                ...staticDependencies:any[]) {
        this.init();
        this.staticDependencies = staticDependencies;
        this.debouncedPopulate = accumulatingDebounce<QueryKeyToQuery<Query>, Query>(
            (queryMap:QueryKeyToQuery<Query>)=>{
                const queries:Query[] = Object.keys(queryMap).map(k=>queryMap[k]);
                this.populate(queries);
            },
            (queryMap:QueryKeyToQuery<Query>, newQuery:Query)=>{
                queryMap[this.queryToKey(newQuery)] = newQuery;
                return queryMap;
            },
            ()=>{return {};},
            0
        );

        reaction(
            ()=>this._cache,
            (cache:Cache<Data, Metadata>)=>{
                // filter out completed promises, we dont listen on them anymore
                this.promises = this.promises.filter(promise=>!this.tryTrigger(promise));
            }
        );
    }

    ensureValidConfig() {
        const {chart} = this

        // Validate the map variable id selection to something on the chart
        autorun(() => {
            const hasVariable = chart.map.variableId && chart.vardata.variablesById[chart.map.variableId]
            if (!hasVariable && chart.data.primaryVariable) {
                const variableId = chart.data.primaryVariable.id
                runInAction(() => chart.map.props.variableId = variableId)
            }
        })

        // When automatic classification is turned off, assign defaults
        reaction(
            () => this.map.props.isManualBuckets,
            () => {
                if (this.map.props.isManualBuckets) {
                    const { autoBinMaximums } = this
                    const colorSchemeValues = toJS(this.map.props.colorSchemeValues) || []
                    for (let i = 0; i < autoBinMaximums.length; i++) {
                        if (i >= colorSchemeValues.length)
                            colorSchemeValues.push(autoBinMaximums[i])
                    }
                    this.map.props.colorSchemeValues = colorSchemeValues
                }
            }
        )
    }

test.cb("flow happens in single ticks", t => {
    const X = types
        .model({
            y: 1
        })
        .actions(self => ({
            p: flow(function*() {
                self.y++
                self.y++
                yield delay(1, true, false)
                self.y++
                self.y++
            })
        }))

    const x = X.create()
    const values: number[] = []
    reaction(() => x.y, v => values.push(v))

    debugger
    x.p().then(() => {
        t.is(x.y, 5)
        t.deepEqual(values, [3, 5])
        t.end()
    })
})

test("it should be possible to share states between views and actions using enhance", t => {
    const A = types.model({}).extend(self => {
        const localState = observable(3)
        return {
            views: {
                get x() {
                    return localState.get()
                }
            },
            actions: {
                setX(value) {
                    localState.set(value)
                }
            }
        }
    })

    let x = 0
    let a = A.create()
    const d = reaction(
        () => a.x,
        v => {
            x = v
        }
    )
    a.setX(7)
    t.is(a.x, 7)
    t.is(x, 7)
    d()
})

test("it should resolve refs during creation, when using generic reference", t => {
    const values: number[] = []
    const Book = types.model({
        id: types.identifier(),
        price: types.number
    })
    const BookEntry = types
        .model({
            book: types.reference(Book)
        })
        .views(self => ({
            get price() {
                return self.book.price * 2
            }
        }))
    const Store = types.model({
        books: types.array(Book),
        entries: types.optional(types.array(BookEntry), [])
    })
    const s = Store.create({
        books: [{ id: "3", price: 2 }]
    })
    unprotect(s)
    reaction(() => s.entries.reduce((a, e) => a + e.price, 0), v => values.push(v))
    s.entries.push({ book: s.books[0] } as any)
    t.is(s.entries[0].price, 4)
    t.is(s.entries.reduce((a, e) => a + e.price, 0), 4)
    const entry = BookEntry.create({ book: s.books[0] }) // can refer to book, even when not part of tree yet
    t.deepEqual(getSnapshot(entry), { book: "3" })
    s.entries.push(entry)
    t.deepEqual(values, [4, 8])
})

 ngOnInit() {
   reaction(() => this.authStore.authError, (authError) => {
     if (authError) {
       this.snackBar.open(authError, '', {
         duration: 3000
       });
     }
   });
 }

test("VS be observable", t => {
    const promises: Promise<any>[] = []
    const i = Todo.create()
    const d = reaction(() => i.state, p => promises.push(p))

    i.reload()
    i.reload()

    t.is(promises.length, 2)

    d()
})

function testCoffeeTodo(
    t: CallbackTestContext & Context<any>,
    generator: (self: any) => (x: string) => IterableIterator<any>,
    shouldError: boolean,
    resultValue: any,
    producedCoffees: string[]
) {
    useStrict(true)
    const Todo = types
        .model({
            title: "get coffee"
        })
        .actions(self => ({
            startFetch: flow(generator(self))
        }))
    const events: any[] = []
    const coffees: string[] = []
    const t1 = Todo.create({})
    unprotect(t1)
    addMiddleware(t1, (c, next) => {
        events.push(c)
        return next(c)
    })
    reaction(() => t1.title, coffee => coffees.push(coffee))

    function handleResult(res) {
        t.is(res, resultValue)
        t.deepEqual(coffees, producedCoffees)
        const filtered = filterRelevantStuff(events)
        t.snapshot(filtered, "Wrong events, expected\n" + JSON.stringify(filtered, null, 2))
        useStrict(false)
        t.end()
    }

    t1.startFetch("black").then(
        r => {
            t.is(shouldError, false, "Ended up in OK handler")
            handleResult(r)
        },
        r => {
            t.is(shouldError, true, "Ended up in ERROR handler")
            console.error(r)
            handleResult(r)
        }
    )
}

export default function reactionWithPrev<D>(
        dataFn:()=>D,
        effectFn:(data:D, prevData?:D)=>void,
        opts?:IReactionOptions
    ) {
    let prevData:D|undefined = undefined;
    let currData:D|undefined = undefined;
    return reaction(
        ()=>{
            prevData = currData;
            currData = dataFn();
            return currData;
        },
        (data:D)=>{
            effectFn(data, prevData);
        },
        opts
    );
}