Ngrx 相对于 Observable Data Services 架构的优势？ [关闭]

Question

observable data service 和 Ngrx store 都为 Angular 应用程序提供了基于 Store 的解决方案。

Ngrx 使用 Flux 设计模式并且需要一个 3rd 方库，而 Observable 数据服务可以使用 angular 和 rxjs 的内置特性来实现，并且在某种程度上我猜它本身就是一个 Angular 设计模式。

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

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

• 解决了由于多个参与者同时更改相同数据而发生的 Facebook 计数器问题
• 当只有底部/顶部真正需要输入方式时，将输入方式向下/向上移动组件树时的“无关道具问题”（对所有阻碍的组件都没用 - 破坏 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 可能会过大。

• 时间旅行调试。喜欢这个功能！

您可以谷歌benefits of ngrx 并查看更多回复。