代码之家 › 专栏 › 技术社区 › noririco

ngrx建模与状态

ngrx api angular

noririco · 技术社区 · 8 年前

export interface User {
    id: string;
    email: string;
    someOptional?: string;
}

{
  id: 1,
  email: x@l.com
}

和

{
  id: 1,
  email: x@l.com,
  someOptional: "something"
}

商店目前有第一个结构。现在获取第二个结构将导致存储拉取第一个结构,而不是新的“扩展版本”,因为它已经有了它(当然)。

我怎么过来的?

@PierreDuc评论: 我这样决定我的路线

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): 
 Observable<Movie> {

        const movieId = route.params['id'];
        //WORKFLOW: ((6))
        return this.store
          .pipe(
            select(selectMovieById(movieId)),
            tap(movie => {
              if (!movie) {
                this.store.dispatch(new MovieRequested({movieId}));
              }
            }),
            filter(movie => !!movie),
            first()
          )



    }

但是如果我刷新movies/123,我就得到了正确的数据,“movies”状态只能保存1个条目。

我应该将此扩展版本存储为“currentMovie”状态吗?

export const moviesRoutes: Routes = [
  {
      path: "",
      component: HomeComponent

  },
  {
      path: ':id',
      component: MovieDetailsComponent,
      resolve: {
          movie: MovieResolver
      }
  }
];

解决方案:thx to@

this.store.dispatch(new MovieClear());

case MoviesActionTypes.MovieClear:

  return {
    ...state,
    currentMovie: undefined
  }

2 回复 | 直到 8 年前

Community Mohan Dere 6 年前

对于类似的情况,我建议采用以下结构

let initialState = {
  id: undefined,
  email: undefined,
  optional: undefined
}

这样你就能克服你的问题。

注: 我假设您现在有一些未定义的相关错误,这是由于访问存储中未初始化的字段造成的,但即使现在 optional 如果参数是某种对象,则仍然会出现错误(在访问某些对象属性时)。我的建议是在流中创建一些过滤逻辑(查找rxjs filter操作符),或者使用 ?

编辑

好吧,我想现在我明白你的问题了。

第一:你必须加上 runGuardsAndResolvers

第二:添加 new MovieReset()

创建此类操作后,使用它的一种方法是在 ngDestroy 钩子 MovieDetailsComponent

另一种方法基本相同,但是在 onDestroy switchMap (在发出重置操作后)返回存储中保存的新值。

Tac 8 年前

你能贴出你在“MovieRequested”动作中使用的减速机吗?

这可能看起来像这样:

switch(action.type) {
   case MovieActionTypes.MOVIE_LOADED: {
      return {
         ...state,
         movies: action.payload
      }
   }

这个代码中的“…state”告诉商店使用你以前的状态并用下面的部分(电影)扩展它。像这样你会得到一个如下的状态:

state = {
   movies: [
      {
         id: 1,
         email: x@l.com
      },
      {
         id: 2,
         email: x@2.com
      }
   ],
   ...

如果这是您想要的(因为这是存储的目的,所以您可以保存会话期间请求的所有项目),则必须调整您的状态,以便它可以保存多部电影:

export interface State {
   isLoading: boolean;
   error: any;
   movies: Array<Movie>;
   ...
}

export const initialMovieState: State = {
   isLoading: false,
   error: "",
   movies: [{
      id: 1,
      email: x@1.com
   }],
   ...
}