Ngrx 相对于 Observable Data Services 架构的优势？

Question

可观察数据服务和 Ngrx 存储都为 angular 应用程序提供了基于存储的解决方案。

Ngrx 使用 flux 设计模式并需要第 3 方库，与 Observable 数据服务形成对比，Observable 数据服务可以使用 angular 和 rxjs 的内置功能来实现，并且在某种程度上我猜是 angular自己设计模式

可以找到有关 Observable Data Service 架构的信息here

我读过他的文章：Redux, RxJs and Ngrx Store - When to Use a Store And Why? 真正理解基于存储的解决方案旨在解决的主要问题是什么，以及我认为它们都解决了这些主要问题的方式：

解决了由于多个参与者同时更改相同数据而发生的 Facebook 计数器问题
"extraneous props issue" 移动输入方式 down/up 组件树时只有 bottom/top 一个真正需要它（对所有组件都无用 - 破坏 SRP）

我看到使用 Ngrx 时的成本 - 包大小更大，大量样板代码 - 对于一个简单的功能需要更改多个文件并实现一个动作，一个减速器，如果使用 ngrx 副作用那么还有一个加载器动作和错误动作.. 理解概念和通量工作方式的学习曲线比我猜的可观察数据服务要大..

然而，一个优势是它提供了很棒的开发工具。

所以问题如标题所述： Ngrx 相对于 Observable Data Services 架构的优势？

一个简单的 Todos 可观察数据服务存储示例：

 @Injectable()
    export class TodoStore {

    private _todos: BehaviorSubject<List<Todo>> = new BehaviorSubject(List([]));

    constructor(private todoBackendService: TodoBackendService) {
        this.loadInitialData();
    }

    get todos() {
        return asObservable(this._todos);
    }

    loadInitialData() {
        this.todoBackendService.getAllTodos()
            .subscribe(
                res => {
                    let todos = (<Object[]>res.json()).map((todo: any) =>
                        new Todo({id:todo.id, description:todo.description,completed: todo.completed}));

                    this._todos.next(List(todos));
                },
                err => console.log("Error retrieving Todos")
            );

    }

    addTodo(newTodo:Todo):Observable {

        let obs = this.todoBackendService.saveTodo(newTodo);

        obs.subscribe(
                res => {
                    this._todos.next(this._todos.getValue().push(newTodo));
                });

        return obs;
    }

    toggleTodo(toggled:Todo): Observable {
        let obs: Observable = this.todoBackendService.toggleTodo(toggled);

        obs.subscribe(
            res => {
                let todos = this._todos.getValue();
                let index = todos.findIndex((todo: Todo) => todo.id === toggled.id);
                let todo:Todo = todos.get(index);
                this._todos.next(todos.set(index, new Todo({id:toggled.id, description:toggled.description, completed:!toggled.completed}) ));
            }
        );

        return obs;
    }


    deleteTodo(deleted:Todo): Observable {
        let obs: Observable = this.todoBackendService.deleteTodo(deleted);

        obs.subscribe(
                res => {
                    let todos: List<Todo> = this._todos.getValue();
                    let index = todos.findIndex((todo) => todo.id === deleted.id);
                    this._todos.next(todos.delete(index));

                }
            );

        return obs;
    }


}

Answer 1

差异一览：

一个商店适用于所有州。您的示例看起来每种数据都有一个：待办事项、事件、联系人等。如果您只有一种数据，那么 NgRx 可能有点矫枉过正。
时间旅行调试。喜欢这个功能！

您可以 google benefits of ngrx 并查看其他回复。

Ngrx 相对于 Observable Data Services 架构的优势？

Ngrx advantages over Observable Data Services architecture?

flux

rxjs

ngrx

angular

ngrx-store