Question

例如，假设我有一个包含2个部分的应用程序。一个是显示信息的主要区域，另一个是弹出模式，可让您从选择中进行选择。

app.directive('buttonRaised', function() {
return {
    restrict: 'E',
    template: '<button class="mdl-button" ng-disabled="disabled" ng-class="ngClass" ng-transclude></button>',
    scope: {
        ngModel: '=',
        disabled: '='
    },
    transclude: true,
    link: function($scope, el, $attrs,formCtrl) {
        console.log(formCtrl)
        $scope.ngClass = {
           // 'disabled': $scope.$parent.formCtrl.$valid,
        };
    }
};

和

 [] [] [] [] []
 [] [] [] [] []

顶部是主屏幕，如果您选择一个框，则会弹出一个模态（底部）并允许您选择要放入主屏幕的项目。

这2个区域共享相同的数据，这是＆＃34;英雄＆＃34;从中选择。

所以这些2＆＃34;状态是可能的＆＃34;喜欢＆＃34; Main＆＃34;和＆＃34;莫代尔＆＃34;拥有相同的＆＃34;数据库＆＃34; ＆＃34;英雄＆＃34;他们在哪里使用它？

像

--------------
| [] [] [] [] |
| [] [] [] [] |
| [] [] [] [] |
| [] [] [] [] |
| [] [] [] [] |
---------------

他们都使用相同的＆＃34;英雄＆＃34;模型？

或者我该如何设计呢？

Answer 1

我根本不会分裂国家。我建议你收集一些英雄并在选择时切换一个isSelected属性。组件道具应该可以从这种状态轻松计算出来。因此，如果你有一个选定的英雄，你会显示模态。保持同步状态不是redux的意图，而是你的每个视图都能够从给定状态计算所需的道具。另请注意，mapStateToProps作为参数接收整个应用程序状态而不是它的一部分。希望这会对你有所帮助。

Answer 2

我认为Heroe列表应该只存在于一个reducer（Main）中。也许选定的英雄存在于模型缩减器中。您可以从1个组件中的多个reducer注入状态。

export default connect(
(state) => ({
    heroesList: state.main.heroesList,
    selected: state.model.selectedHero
}),
(dispatch) => ({

})
)(Model)

我可以拥有一个共享的模型＆＃39;两个Redux州/减少者之间？

2 个答案: