请求基本的Typescript/Javascript和RxJs代码解释_Javascript_Typescript_Rxjs

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

javascript typescript rxjs

请求基本的Typescript/Javascript和RxJs代码解释,javascript,typescript,rxjs,Javascript,Typescript,Rxjs,我正在学习rxjs，在这两行代码中，我的头脑很难受： const dispatcher = fn => (...args) => appState.next(fn(...args)); const actionX = dispatcher(data =>({type: 'X', data})); 至少我不明白的部分原因是它使用的是我还不习惯的速记语法。我一直在尝试扩展它，以准确地了解正在发生的事情，但未能正确地做到这一点。例如，actionX调用dispatcher，一个函数

我正在学习rxjs，在这两行代码中，我的头脑很难受：

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

至少我不明白的部分原因是它使用的是我还不习惯的速记语法。我一直在尝试扩展它，以准确地了解正在发生的事情，但未能正确地做到这一点。例如，actionX调用dispatcher，一个函数作为参数传递，但在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"}

一旦删除了简写方法结构，这就是代码

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

actionX('something')'

希望这能让您更好地理解。

这将是删除简写方法结构后的代码

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

actionX('something')'

希望这能让您更好地理解。

一种更经典的JS方法，没有（

=>

）、（

…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);
    };
};

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');

此代码的要点似乎是包装传递给

调度程序（…）

的回调（

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');

在函数式编程中，有函数的概念。该链接将其定义为：

高阶函数是一个可以将另一个函数作为参数的函数，或返回一个函数作为结果的函数

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

使用现代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');

没有（

=>

）、（

…args）=>{}

）和（

appState.next（fn（…args））

）的更经典的JS方法用于：

将是：

const dispatcher = function (fn) {
    return function () {
        // arguments are the parameters passed to the function
        const result = fn.apply(null, arguments);
        return appState.next(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 actionX = function (data) {
    appState.next({type: 'X', data: data});
};

actionX('some data');