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 调度机制。

我的问题是如何在使用 ngrx / Store loading.dismiss()机制时管理dispatch逻辑。换句话说，当使用 ngrx / Store dispatch Action机制时，我不知道如何关闭 loading-spinner （一旦从后端rest API收到结果）

非常感谢任何建议

Answer 1

您需要添加ngrx/effects库来处理副作用，例如“longRunningService”

我从ngrx的官方例子中了解到这一点。我建议你看看 https://github.com/ngrx/example-app

以下代码基于示例应用程序并处理加载内容，请检查它。

我假设您正在编写离子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中管理可能持久的行动

1 个答案: