Question

我有一个基于 AngularDart ， Redux 和 Sockets.io 的小项目。

在此项目中，一个简单的组件显示项目列表。在要求Redux中间件从API后端获取信息后，将显示项目列表。一切正常，我显示了我的物品清单。

items_component.dart：

import 'package:angular/angular.dart';
import 'package:p_web/src/models/item.dart';
import 'package:p_web/src/redux/app_actions.dart';
import 'package:p_web/src/redux/app_state.dart';
import 'package:redux/redux.dart';

@Component(
    selector: "content",
    templateUrl: "items_component.html",
    directives: [
        NgFor,
    ]
)
class ItemsComponent implements OnInit {
    ItemsComponent(this._store);
    final Store<AppState> _store;

    List<Item> get items => _store.state.items;

    @override
    void ngOnInit() async {
        // Asks the Redux middleware to fetch the data, after which is uses the
        // response to create a new application state. (the usual redux dance).
        _store.dispatch(MGetItems());
    }
}

items_component.html：

<ul>
    <li *ngFor="let item of items">{{item.name}}</li>
</ul>

现在，API后端有时会通过Sockets.io向AngularDart项目发送一条消息。收到消息的结果是，调度了MGetItems操作。同样，一切都会按预期进行，并使用响应中的新项目创建应用程序状态的新版本。

问题在于，尽管已修改了应用程序状态（通过创建新状态-Redux舞蹈），但是这次不重建组件，并且项列表不反映更改。就像没有发生变更检测，我也不知道为什么。

我已经为此苦苦挣扎了3天，但无济于事。我做错了什么吗？还是我缺少了什么？我想要的很简单，当以修改组件的getter结果的方式修改应用程序状态时，我希望刷新所述组件。

这里是化简器，它负责创建应用程序状态的新版本。

app_reducer.dart

import 'package:p_web/src/redux/app_actions.dart';
import 'package:p_web/src/redux/app_state.dart';

AppState appReducer(AppState state, action) {

    if (action is RSetItems) {
        return state.copyWith(
            items: action.items
        );
    }
    return state;
}

app_state.dart：

import 'package:meta/meta.dart';
import 'package:p_web/src/models/item.dart';

@immutable
class AppState {

    final List<Item> items;

    AppState({
        this.items
    });

    AppState copyWith({
        List<Item> items,
    }) {
        return AppState(
            items: items ?? this.items,
        );
    }
}

无法通过Redux应用程序状态触发角度变化检测

0 个答案: