Question

在Redux架构中相对较新，我需要实现redux以管理角度状态。我有大约五个需要从api获取的对象。我的困惑是如何将所有内容捆绑在一起以更新组件。

我的操作

   ```import { Injectable } from '@angular/core';
    import { NgRedux } from '@angular-redux/store';
    import { IAppState } from './app.state';

    @Injectable()
    export class SessionActions {
      static LIST_ALL_COMPETITIONS = 'LIST_ALL_COMPETITIONS';
      static LIST_ONE_COMPETITION = 'LIST_ONE_COMPETITION';
      static LIST_ALL_TEAMS= 'LIST_ALL_TEAMS';
      static LIST_TEAM_STANDING = 'LIST_TEAM_STANDING';
      static LIST_ALL_MATCHES = 'LIST_ALL_MATCHES';
      static LIST_TOP_SCORER_FOR_COMPETITION = 'LIST_TOP_SCORER_FOR_COMPETITION';
      static LIST_MATCHES_FOR_COMPETITION = 'LIST_MATCHES_FOR_COMPETITION';
      static LIST_MATCHES_FOR_TEAM = 'LIST_MATCHES_FOR_TEAM';
      static LIST_TEAM = 'LIST_TEAM';
      static LIST_ALL_AREAS = 'LIST_ALL_AREAS';
      static LIST_ONE_AREA = 'LIST_ONE_AREA';
      static LIST_ONE_PLAYER = 'LIST_ONE_PLAYER';
      static LIST_ALL_MATCHES_ONE_PLAYER = 'LIST_ALL_MATCHES_ONE_PLAYER';


      constructor(private ngRedux: NgRedux<IAppState>) {}


      listAllCompetitions() {
        this.ngRedux.dispatch({ type: SessionActions.LIST_ALL_COMPETITIONS });
      };

      listOneCompetition(year) {
        this.ngRedux.dispatch({ type: SessionActions.LIST_ONE_COMPETITION, payload:year });
      };

      listAllTeams() {
        this.ngRedux.dispatch({ type: SessionActions.LIST_ALL_TEAMS });
      };

      listTeamStanding() {
        this.ngRedux.dispatch({ type: SessionActions.LIST_TEAM_STANDING });
      };

      listAllMatches() {
        this.ngRedux.dispatch({ type: SessionActions.LIST_ALL_MATCHES });
      };

      listTopScorerForCompetition() {
        this.ngRedux.dispatch({ type: SessionActions.LIST_TOP_SCORER_FOR_COMPETITION });
      };

      listMatchesForCompetition() {
        this.ngRedux.dispatch({ type: SessionActions.LIST_MATCHES_FOR_COMPETITION });
      };

      listMatchesForTeam() {
        this.ngRedux.dispatch({ type: SessionActions.LIST_MATCHES_FOR_TEAM });
      };

      listTeam() {
        this.ngRedux.dispatch({ type: SessionActions.LIST_TEAM });
      };

      listAllAreas() {
        this.ngRedux.dispatch({ type: SessionActions.LIST_ALL_AREAS });
      };

      listOneArea() {
        this.ngRedux.dispatch({ type: SessionActions.LIST_ONE_AREA });
      };

      listOnePlayer() {
        this.ngRedux.dispatch({ type: SessionActions.LIST_ONE_PLAYER });
      };

      listAllMatchesOnePlayer() {
        this.ngRedux.dispatch({ type: SessionActions.LIST_ALL_MATCHES_ONE_PLAYER });
      };

    }```

国家（如果正在以正确的方式实施）

```import {AnyAction, combineReducers} from 'redux'
import {competitionReducer} from './app-reducers/competition.reducer'
import {ICompetitionState} from './app-store/competition.store'

export interface IAppState{
    competitions?: ICompetitionState;

  }

export const rootReducer = combineReducers({
  competitions:competitionReducer
  ...
  //
  //i will add other  reducers for the objects, that if am doing the right thing
})```

Reducer，但不确定我的代码是否还可以

```import {AnyAction} from 'redux'
import {SessionActions} from '../app.actions'
import {ICompetitionState} from '../app-store/competition.store';
import {COMPETITION_STATE}  from '../app-store/competition.store';

export function competitionReducer(state: ICompetitionState = COMPETITION_STATE, action:AnyAction): ICompetitionState{
    switch(action.type){
        case SessionActions.LIST_ALL_COMPETITIONS:
            return{
                competitions : [...state.competitions, ...action.competitions ]
            }
        case SessionActions.LIST_ONE_COMPETITION:
            return {
                competitions:[
                     state.competitions.find(t => t.id == action.year)
//here i want to get the id of a particular record
                ]

            }
    }
}```

这是到目前为止的错误

错误 node_modules/@angular-redux/store/components/dev-tools.d.ts（3,33）：错误TS2307：找不到模块'redux-devtools-extension'。 node_modules/@angular-redux/store/components/ng-redux.d.ts（10,31）：错误TS2 420：类'NgRedux'错误地实现了接口'ObservableStor e'。类型“ NgRedux”缺少属性“ [Symbol.observable]”，但 “ ObservableStore”类型中为必填项。

我的问题是我如何定义状态或存储，我不知道区别，然后定义归约管理每个对象，使用组合归约器将所有归约器集合在一起，将它们注册到我的应用中模块

感谢您的帮助！

如何使用史诗中间件在角度中使用redux来维持不同状态

0 个答案: