NgRx/component-store フォームの値で状態管理している値にupdateしようとするも、反映されない

Question

やろうとしていること

Angular、プログラミング初心者です。
Angularアプリに@ngrx/component-storeを導入。
コンポーネントに設置しているフォームの値を状態管理オブジェクトに反映し、さらに反映された状態管理オブジェクトをそのコンポーネント で表示したい。

処理の流れとしては、下記の感じでしょうか。
コンポーネント→状態管理オブジェクト→コンポーネント

下記のリンクのcomponent-storeの使用例(ボタンをクリックすると数字が1ずつ増えていくアプリ)をベースとしています。
https://stackblitz.com/edit/angular-ngrx-component-store?file=src%2Fapp%2F

現在できていること、わからないこと

フォームに入力した値をfv.store.tsというstoreに渡し、submitボタンを押すとコンソールにフォームの値が表示されるので、storeファイルまでは値は渡ってきているようです。
その後の、フォームの値をどのように状態管理オブジェクトに渡す（update）のかわからない。
値の更新はupdaterというのを使えばいいのかなと思い、使ってみているのですが、次のエラーが出ています。

アドバイスやこの辺りについて詳しく書かれているサイトあれば、教えてくただきたく、宜しくお願い致します。

エラー

型 '{ fv: string; }' の引数を型 '(state: FvState, value: void) => FvState' のパラメーターに割り当てることはできません。
  オブジェクト リテラルは既知のプロパティのみ指定できます。'fv' は型 '(state: FvState, value: void) => FvState' に存在しません。

コード

// view

<form [formGroup]="postUser" (ngSubmit)="postName()">
  username:<input type="text" formControlName="username" /><br />
  <button type="submit">Submit</button>
</form>
<div class="state">This form Value is {{ fv$ | async }}</div>

// login.component.ts
import { Component, OnInit, VERSION } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { FormStore } from '../fv.store';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
})
export class LoginComponent implements OnInit {
  constructor(
    private readonly formStore: FormStore
  ) {}

  ngOnInit(): void {}
  postUser = new FormGroup({
    username: new FormControl('', []),
  });

  readonly fv$ = this.formStore.fv$;

  postName() {
    this.formStore.add(this.postUser.value);
  }
}

// fv.store.ts 

import { Injectable } from '@angular/core';
import { ComponentStore } from '@ngrx/component-store';
import { Observable } from 'rxjs';

export interface FvState {
  fv: any;
}

@Injectable()
export class FormStore extends ComponentStore<FvState> {
  constructor() {
    super({ fv: '' });
  }

  fv$: Observable<string> = this.select((state) => state.fv);
  add(user: any) {
    const name = JSON.stringify(user.username);
　　console.log(name) // ⇦フォーム値は問題なく表示されている。
    this.fv$ = this.updater({  fv: name });// ⇦この部分の書き方がよくわかりません。
  }
}

Answer 1

手前味噌で恐れいりますが、解説記事をQiitaに書いているのでご参照ください。
https://qiita.com/seapolis/items/97258d7c2b11148d0a81#ngrx
サンプルコードです。
https://github.com/kaito3desuyo/angular-state-example/blob/master/src/app/ngrx-state/component-store/ngrx-state.component-store.ts

結論から申し上げると、this.updater()を使うことは間違ってはいないのですが、
この関数は「関数を返す関数」であるため、実際のところは以下のようにするのが適切です。

// fv.store.ts 

import { Injectable } from '@angular/core';
import { ComponentStore } from '@ngrx/component-store';
import { Observable } from 'rxjs';

export interface FvState {
  fv: any;
}

@Injectable()
export class FormStore extends ComponentStore<FvState> {
  constructor() {
    super({ fv: '' });
  }

  fv$: Observable<string> = this.select((state) => state.fv);

  add = this.updater((state, name: string) => ({...state, fv: name}));
}