ngrx 商店 - 如何在 UI 可能持久的操作中进行管理

Question

我开始调查 ngrx/Store，我面临以下问题。

我需要从我的 UI 组件执行对远程 rest API 的调用，这可能需要一些时间才能执行。我想管理向用户显示标准 loading-spinner.

的等待时间

我习惯用看起来像

的代码来处理这种情况

    let loading = this.loadingCtrl.create({
          content: 'Please wait while we load stuff'
        });
   loading.present();
   this.longRunningService.doHeavyWork()
          .subscribe(
              (result) => {
                              // manage result;
                            },
              (err) => console.log(err),
              () => loading.dismiss()
          );

上面代码片段中的关键点（对于我的问题）是当 longRunningService 完成 doHeavyWork 逻辑时（即当 Observable 完成时）加载微调器被关闭。

现在我想重构这段代码，使用ngrx/Store dispatch机制

我的问题是如何在使用 ngrx/Store dispatch 机制时管理 loading.dismiss() 逻辑。换句话说，我不知道如何在使用 ngrx/Store dispatch Action机制。

非常感谢任何建议

Answer 1

您需要添加 ngrx/effects 库来处理像 "longRunningService"

这样的副作用

这个是从ngrx官方的例子学来的。我建议你看看 https://github.com/ngrx/example-app

下面的代码是基于example-app的，处理加载的东西，请查收。

我假设您正在编写 ionic v2 应用程序？因为 LoadingController..

操作：

export const LOAD_STUFF = "LOAD_STUFF";
export const LOAD_STUFF_SUCCESS = "LOAD_STUFF_SUCCESS";
export const LOAD_STUFF_FAIL = "LOAD_STUFF_FAIL";

@Injectable()
export class StuffActions{

  loadStuff() : Action {
    return {
      type: LOAD_STUFF
    };
  }

  loadStuffSuccess(stuff : any []) : Action {
    return {
      type: LOAD_STUFF_SUCCESS,
      payload: stuff
    };
  }
}

减速器

export interface State {
  entities: [];
  loading : boolean;
  complete : boolean;
}

const initalState : State = {
  entities: [];
  loading : false;
  complete : false;
};

export function reducer(state = initalState, action) : State {
  switch (action.type) {

    case LOAD_STUFF:
      return Object.assign({}, state, {
        loading: true,
        complete: false
      });

    case LOAD_STUFF_SUCCESS:
      return {
        complete: true,
        loading: false,
        entities : action.payload
      };

    default:
      return state;
  }
}

// SELECTORS
export const getLoading = (state: State) => state.loading;
export const getComplete = (state: State) => state.complete;
export const getEntities = (state: State) => state.stuff;

效果

@Injectable()
export class EnvioEffects {
  constructor(private actions$: Actions, private _stuffActions : StuffActions, private _longRunningService: LongRunningService ){}

  @Effect() loadStuff: Observable<Action> = this.actions$
    .ofType(LOAD_STUFF)
    .switchMap(() => this._longRunningService.getStuff())
    .map( stuff => this._stuffActions.loadStuffSuccess(stuff));

}

选择器索引。对于选择器，我使用 https://github.com/reactjs/reselect

import * as fromStuff from "./stuff";
import {createSelector} from "reselect";
import {ActionReducer, combineReducers, Action} from "@ngrx/store";    

export interface State {
  stuff: fromStuff.State
}

const reducers = {
  stuff: fromStuff.reducer
};

export const reducer: ActionReducer<State> = combineReducers(reducers);

export const rootReducer = (state: State, action: Action) => {
  return reducer(state, action);
};

export const getStuffEntities = createSelector(getOriginState, fromStuff.getEntities);
export const getStuffLoading = createSelector(getOriginState, fromOrigin.getLoading);
export const getStuffComplete = createSelector(getOriginState, fromOrigin.getComplete);

第

页

import * as fromRoot from "../../reducers/index";

@Component({
  selector: 'stuff',
  templateUrl: 'stuff.html'
})
export class StuffPage implements OnDestroy {

  destroy$: Subject<any> = new Subject();

  constructor(public navCtrl: NavController,
              public loadingCtrl: LoadingController,
              private _store: Store<fromRoot.State>,
              private _stuffActions: StuffActions) {
  }


  ionViewDidLoad() {
    // HERE I SHOW THE LOADING ANIMATION UNTIL THE LONG RUNNING SERVICE COMPLETE
    this._store.select(fromRoot.getStuffLoading)
      .takeUntil(this.destroy$)
      .filter(isloading => isloading)
      .map(() => this.createLoader())
      .do(loading => loading.present())
      .delayWhen(loading => this._store.select(fromRoot.getStuffComplete).filter(complete => complete))
      .map(loading => loading.dismiss())
      .subscribe();

    // LOAD THE STUFF
    this._store.dispatch(this._stuffActions.loadStuff());

  }

  createLoader(): Loading {
    return this.loadingCtrl.create({
      content: "Loading stuff"
    });
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.unsubscribe();
  }
}

ngrx 商店 - 如何在 UI 可能持久的操作中进行管理

ngrx Store - How to manage in the UI potentially long lasting actions

ngrx

angular