代码即逻辑 -- 聊聊 Effects 及在 Angular 中的应用

╰+哭是因爲堅強的太久メ 2022-06-05 08:53 175阅读 0赞

大概去年9月左右，看过 [ Cycle.js][Cycle.js] 创作者 [ André Staltz][Andr_ Staltz] 的一个视频：讲为什么 React 并不是一个响应式的框架，同时介绍了 `Cycle.js`。当时就觉得这个思路好牛叉，但一直有点似懂非懂。最近由于工作需要，在 Angular 中使用了 [ @ngrx/effects][_ngrx_effects] （这个是借鉴了 `Cycle.js` 的思路，把这种思路应用在 Angular 中），对这个模式有了些粗浅认识，这里和大家分享。本文需要您了解 `rxjs` 和 `@ngrx/store` (Redux 在 Angular 中的实现)。这些前置知识可以从本人以前写过一些文章获得： [ Angular 从0到1：Rx -- 隐藏在 Angular 中的利剑][Angular _0_1_Rx -- _ Angular] 和 [ Redux你的 Angular 应用][Redux_ Angular]

## 背景知识和术语 ##

这种编程思路的根源是把所有的应用（或者组件）的逻辑想象成一个纯粹的对**数据**进行处理的函数(和外界的读写操作-- 这些读写操作就叫 **Effects** \--都不属于这个函数的职责)以及一系列外部的读、写驱动构成。

![1][]示意图

举个小例子：

function main(){
      // 逻辑部分
      var a = 2;
      var b = 10;
      var result = a * b;
      // 写入 console 的 Effect
      console.log('result is: ' + result);
      // 操作 DOM 的 Effect
      var resultElement = document.getElementById('result');
      resultElement.textContent = result;  
    }

上面这段简单代码中前3行是代码的主要逻辑，接下来的几行代码都对外部世界产生了影响，所以他们都是 Effects （ Effect 这个词其实挺头疼，不知道中文那个词能比较形象的对应，“影响”感觉还是不到位）。那么我们接下来按照上面提到原则来改写这部分代码：**逻辑部分不涉及任何对外部世界的影响**。

// 程序的主体逻辑完全剥离 Effects，只是对数据做处理
    function main(){
      var a = 2;
      var b = 10;
      var result = a * b;
      return {
        DOM: result,
        log: result
      }; 
     } 
    
    // 对于 Console 的影响写在这里
    function logEffect(result){
      console.log('result is: ' + result);
    }
    
    // 对于 DOM 的影响写在这里
    function domEffect(result){
      var resultElement = document.getElementById('result');
      resultElement.textContent = result;  
    }
    
    // 如何让数据和 effects 连接起来，这是一个粘合剂
    function run(mainFn){
      var sink = mainFn();
      logEffect(sink.log);
      domEffect(sink.DOM);
    }
    
    run(main);

大概的意思就这样了，看起来也没啥啊，你可能会想。别着急，它的威力我们到后面就知道了。那么这种思维方式和 Angular 有什么关系呢？

## 状态、 Action 流 和 Effect ##

Redux 中的 Reducer 已经是一个纯函数，而且是完全的只对状态数据进行处理的纯函数。那么对于我们前面说的原则，Reducer 已经满足了。在发出某个 Action 之后，Reducer 会对状态数据进行处理然后返回。但一般来说，其实在执行 Action 后我们还是经常会可以称为 Effect 的动作，比如：进行 HTTP 请求，导航，写文件等等。而这些事情恰恰是 Redux 本身无法解决的，所以才有了诸如 Redux-Thunk 等中间件的产生。下面我们一起看看如何使用 `@ngrx/effects` 解决这个问题。

还是举一个小例子，比如登录注册这种经常用到的鉴权流程，我们一般有如下 Action ：`LOGIN`、`LOGIN_SUCCESS`、`LOGIN_FAIL`、`REGISTER`、`REGISTER_SUCCESS`、`REGISTER_FAIL` 和 `LOGOUT`。

先拿 `LOGIN` 来说，我们希望流程是这个样子的：发出 `LOGIN` Action --> 使用登录 service 进行登录鉴权 --> 如果成功，发送 `LOGIN_SUCCESS` Action，如果失败，发送 `LOGIN_FAIL` Action。按原来的做法，我们至少需要在组件中的某个位置调用 service 进行 HTTP 请求，组件或者服务在 response 返回后决定发送 `LOGIN_SUCCESS` 或 `LOGIN_FAIL` 。

如果应用我们上面提到的 Effect 的概念，其实 Reducer 已经扮演了纯数据处理函数的角色，而 Action 在 `@ngrx/effects` 中是一个信号流，它扮演的是连接状态和要做的 Effect 中的粘合剂，就像上面代码中的 `function run(mainFn)` 一样。

@Injectable()
    export class AuthEffects{
      // 通过构造注入需要的服务和 action 信号流
      constructor(private actions$: Actions, private authService: AuthService) { }
    
      //用 @Effect() 修饰器来标明这是一个 Effect
      @Effect() 
      login$: Observable<Action> = this.actions$ // action 信号流
        .ofType(authActions.ActionTypes.LOGIN) // 如果是 LOGIN Action
        .map(toPayload) // 转换成 action 的 payload 数据流
        .switchMap((val:{username:string, password: string}) => {
          // 调用服务
          return this.authService.login(val.username, val.password);
        })
        // 如果成功发出 LOGIN_SUCCESS Action 交给其它 Effect 或者 Reducer 去处理
        .map(user => new authActions.LoginSuccessAction({
        user: user})) 
        // 如果失败发出 LOGIN_FAIL Action 交给其它 Effect 或者 Reducer 去处理
        .catch(err => of(new authActions.LoginFailAction(err.json())));
    
    }

你可能会问，如果我们需要登录成功后导航到 `/home` 呢？导航也是effect，而 actions$ 是一个信号流，所以你完全可以定义一个 effect 监听 `LOGIN_SUCCESS` ，捕获到后就进行导航即可

@Effect()
      navigateHome$: Observable<Action> = this.actions$
        .ofType(actions.ActionTypes.LOGIN_SUCCESS)
        .map(() => go(['/home']));

这样的话，其实组件都没有必要调用 Service 了，只需发出信号就好。

onSubmit({value, valid}){
        if(!valid) return;
        this.store$.dispatch(
          new authActions.LoginAction({
            username: value.username, 
            password: value.password
          }));
      }

那更复杂一些怎么办？比如我们登录后需要取得该登录用户的待办事项列表，那我们照猫画虎但写到 `return this.todoService.getTodos(auth.user.id);` 发现还需要访问 `auth` 啊，怎么破？

@Effect()
      loadTodos$: Observable<Action> = this.actions$
        .ofType(todoActions.ActionTypes.LOAD_TODOS)
        .map(toPayload)
        .switchMap(() => {
          return this.todoService.getTodos(auth.user.id); // 这个auth怎么得到啊？
        })
        .map(todos => new todoActions.LoadTodosSuccessAction(todos))
        .catch(err => of(new todoActions.LoadTodosFailAction(err.json())));

别忘了，ngrx 是基于 rxjs 的，非常善于合并和操作流，而 store 也是一个流，那就非常好办了，我们只需在 store 取得 auth 的最新值，然后合并这两个流就好了：

@Effect()
      loadTodos$: Observable<Action> = this.actions$
        .ofType(todoActions.ActionTypes.LOAD_TODOS)
        .map(toPayload)
        .withLatestFrom(this.store$.select('auth'))
        .switchMap(([_, auth]) => {
          return this.todoService.getTodos(auth.user.id);
        })
        .map(todos => new todoActions.LoadTodosSuccessAction(todos))
        .catch(err => of(new todoActions.LoadTodosFailAction(err.json())));

我感觉这种思路下的编程真正实现了：如果你逻辑想清楚了，你的代码也就基本写完了。

[Cycle.js]: https://link.juejin.im?target=https%3A%2F%2Fcycle.js.org%2F
[Andr_ Staltz]: https://link.juejin.im?target=https%3A%2F%2Fstaltz.com%2F
[_ngrx_effects]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fngrx%2Feffects
[Angular _0_1_Rx -- _ Angular]: https://link.juejin.im?target=http%3A%2F%2Fwww.jianshu.com%2Fp%2F869a3f74d3ca
[Redux_ Angular]: https://link.juejin.im?target=http%3A%2F%2Fwww.jianshu.com%2Fp%2F3cf03ae2eac1
[1]: https://user-gold-cdn.xitu.io/2017/4/12/1675ef86ec419cf59b3bcdef945b8be0?imageView2/0/w/1280/h/960/ignore-error/1