javascript - 请求基本 Typescript/Javascript 和 RxJs 代码解释

Question

我正在学习 rxjs，并且很难理解这两行代码:

const dispatcher = fn => (...args) => appState.next(fn(...args));
const actionX = dispatcher(data =>({type: 'X', data}));

我不明白的至少部分原因是它使用了我还不习惯的简写语法。我一直在尝试扩展它以准确理解正在发生的事情，但未能正确地做到这一点。例如，actionX 调用调度程序，并且函数作为参数传递，但直到在 appState.next 中调用相同的函数后才实际运行？似乎有很多函数返回函数，这让我头晕目眩。任何见解都会有所帮助。

来自此:

import Rx from 'rxjs/Rx';

const inputEl = document.querySelector('input');
const activeEl = document.querySelector('#active');
const doneEl = document.querySelector('done');

const appState = new Rx.BehaviorSubject({todos: []});

appState.subscribe(console.log);

const dispatcher = fn => (...args) => appState.next(fn(...args));
const actionX = dispatcher(data =>({type: 'X', data}));

actionX('some data');

此代码记录以下内容:

>{todos: Array(0)}
>{type: "X", data: "some data"}

Answer 1

一种更经典的 JS 方法，无需 arrow functions (=>), rest parameters (...args) => {}) 和 spread syntax (appState.next(fn(...args))) 用于:

const dispatcher = fn => (...args) => appState.next(fn(...args));

将是:

const dispatcher = function (fn) {
    return function () {
        // arguments are the parameters passed to the function
        const result = fn.apply(null, arguments);
        return appState.next(result);
    };
};

这段代码的要点似乎是包装传递给 dispatcher(...) 的回调 (fn)，以便 appState使用回调的结果更新。这使得重用执行某些代码并将其设置为 appState 中的下一个值的功能变得更加容易。如果没有这个，您需要记住每次都将回调中的值推回您的应用程序状态。

换句话说，如果不使用此模式，上面的代码将是:

import Rx from 'rxjs/Rx';

const inputEl = document.querySelector('input');
const activeEl = document.querySelector('#active');
const doneEl = document.querySelector('done');

const appState = new Rx.BehaviorSubject({todos: []});

appState.subscribe(console.log);

//const dispatcher = fn => (...args) => appState.next(fn(...args));
//const actionX = dispatcher(data => ({type: 'X', data}));

const actionX = function (data) {
    appState.next({type: 'X', data: data});
};

actionX('some data');

这对于您只有一个操作的情况可能很有用，但是如果您有多个操作怎么办？您将为每个操作复制 appState.next(...)。如果回调结果的调度更复杂怎么办？好吧，这会导致更多的重复和错误的可能性以及彼此不同步。这听起来像是函数式编程的一个很好的用途，并将其提取到可重用的函数中:

import Rx from 'rxjs/Rx';

const inputEl = document.querySelector('input');
const activeEl = document.querySelector('#active');
const doneEl = document.querySelector('done');

const appState = new Rx.BehaviorSubject({todos: []});

appState.subscribe(console.log);

//const dispatcher = fn => (...args) => appState.next(fn(...args));
//const actionX = dispatcher(data => ({type: 'X', data}));

const dispatcher = function (state) {
    appState.next(state);
};
// or for a shorter modern version:
// const dispatcher = state => appState.next(state);

const actionX = function (data) {
    dispatcher({type: 'X', data: data});
};

actionX('some data');

在函数式编程中，有一个higher order functions的概念。该链接将其定义为:

A higher-order function is a function that can take another function as an argument, or that returns a function as a result.

这通常是为了减少重复并使您的应用程序更具可组合性，从而减少需要编写的代码。使用这种理念，我们可以进一步改进上面的代码。我们不必检索状态并将其传递给调度程序函数，而是可以提供一个检索状态并返回函数的函数，以便可以多次执行此代码(因为我们可以保留对该返回函数的引用) .

import Rx from 'rxjs/Rx';

const inputEl = document.querySelector('input');
const activeEl = document.querySelector('#active');
const doneEl = document.querySelector('done');

const appState = new Rx.BehaviorSubject({todos: []});

appState.subscribe(console.log);

//const dispatcher = fn => (...args) => appState.next(fn(...args));
//const actionX = dispatcher(data => ({type: 'X', data}));

const dispatcher = function (fn) {
    return function () {
        // arguments are the parameters passed to the function
        const result = fn.apply(null, arguments);
        return appState.next(result);
    };
};

const actionX = dispatcher(function (data) {
    return {type: 'X', data: data});
});

actionX('some data');

使用现代 JS 来简化所有代码，最终得到的结果是:

import Rx from 'rxjs/Rx';

const inputEl = document.querySelector('input');
const activeEl = document.querySelector('#active');
const doneEl = document.querySelector('done');

const appState = new Rx.BehaviorSubject({todos: []});

appState.subscribe(console.log);

const dispatcher = fn => (...args) => appState.next(fn(...args));
//const dispatcher = function (fn) {
//    return function () {
//        // arguments are the parameters passed to the function
//        const result = fn.apply(null, arguments);
//        return appState.next(result);
//    };
//};

const actionX = dispatcher(data => ({type: 'X', data}));
//const actionX = dispatcher(function (data) {
//    return {type: 'X', data: data});
//});

actionX('some data');