ngrx狀態未顯示在模板中

我正在使用 angular 和 ngrx 在博客上作業。

帖子是從服務器收到的，它們顯示在posts-list.component.

當用戶點擊帖子標題時，他應該被導航到路線/posts/:id以查看完整帖子，并且帖子應該保存在商店和本地存盤中作為selectedPost.

問題是selectedPost在 store 和 localStorage 中設定了它，但它沒有顯示在視圖中。

這是代碼：（沒有應用樣式）

模塊：

app.module.ts:

// imports...


@NgModule({
  declarations: [
    AppComponent,
    BaseComponent,
    HomeComponent,
    NavigationComponent,
    FooterComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    StoreModule.forRoot({}),
    StoreDevtoolsModule.instrument(),
    EffectsModule.forRoot(),
    FontAwesomeModule,
    PostsModule
  ],
  providers: [AppPreloadingStrategyService],
  bootstrap: [AppComponent]
})
export class AppModule { }

post.module.ts：

// imports..

@NgModule({
  declarations: [
    PostsListComponent,
    PostComponent
  ],
  imports: [
    CommonModule,
    RouterModule,
    ReactiveFormsModule,
    StoreModule.forFeature(featureKey,postReducer),
    EffectsModule.forFeature([PostEffects])
  ],
  exports: [
    PostsListComponent,
    PostComponent
  ]
})
export class PostsModule { }

狀態：

post.actions.ts：

// imports...

export const loadPosts = createAction('[Post] Load');
export const loadPostsSuccess = createAction('[Post] Load Success', props<{posts: Post[]}>());
export const loadPostsError = createAction('[Post] Load Error', props<{error: string}>());

export const setSelectedPost = createAction('[Post] Set Selected Post', props<{post: any}>());

export const selectPost = createAction('[Post] Select', props<{post: Post}>());

export const updatePost = createAction('[Post] Update', props<{update: Update<Post>}>());

export const selectUpdatedPost = createAction('[Post] Select Updated', props<{title: string, content: string}>());

post.reducer.ts：

export interface PostsState extends EntityState<Post> {
  selectedPost: Post;
  error: any;
}

export function selectItemId(a: Post): string {
  return a.id.toString();
}

export function sortByName(a: Post, b: Post): number {
  return a.title.localeCompare(b.title);
}

export const postAdapter: EntityAdapter<Post> = createEntityAdapter<Post>();

export const initialState = postAdapter.getInitialState({selectId: selectItemId,
  sortComparer: sortByName,selectedPost: undefined, error: ''});

export const _postReducer = createReducer(
  initialState,
  on(postActions.loadPostsSuccess, (state , { posts }) => {
    return postAdapter.setAll(posts, state);
  }),
  on(postActions.loadPostsError, (state, {error}) => {
    return {...state, error: error};
  }),
  on(postActions.updatePost, (state, {update}) => {
    return postAdapter.updateOne(update, state);
  }),
  on(postActions.setSelectedPost, (state, {post}) => {
    return {...state, selectedPost: post};
  })
);

export function postReducer(state: any, action: Action) {
  return _postReducer(state, action);
}

// selectors

export const featureKey = "posts";

const selectPostsFeature = createFeatureSelector<PostsState>(featureKey);

const {selectAll} = postAdapter.getSelectors();

export const getPosts = createSelector(
  selectPostsFeature,
  selectAll
);

export const getSelectedPost = createSelector(
  selectPostsFeature,
  (state: PostsState) => state.selectedPost
);

后期效果.ts：

@Injectable()
export class PostEffects {
  constructor(private actions$: Actions, private http: HttpClient) {}

  loadPosts$ = createEffect(() => this.actions$.pipe(
    ofType('[Post] Load'),
    mergeMap(() => this.http.get('http://localhost:3000/posts').pipe(
      map(posts => ({type: '[Post] Load Success', posts: posts})),
      catchError(err => of({type: '[Post] Load Error', error: err}))
    ))
  ));

}

成分：

post.component.ts：

@Component({
  selector: 'app-post',
  templateUrl: './post.component.html',
  styleUrls: ['./post.component.scss']
})
export class PostComponent implements OnInit {

  constructor(
    private store: Store,
    private fb: FormBuilder,
    private route: ActivatedRoute,) { }

  post$: Observable<Post>;
  postUrl: any;

  formGroup = this.fb.group({
    title: [''],
    content: ['']
  });

  ngOnInit(): void {
    if(localStorage.getItem('theSelectedPost') !== null) {
      this.store.dispatch(setSelectedPost({post: localStorage.getItem('theSelectedPost')}));
    }
    this.post$ = this.store.pipe(select(getSelectedPost));
    this.postUrl = this.route.snapshot.paramMap.get("id");
  }

  updatePost(post: Post){
    this.store.dispatch(updatePost({update: {id: this.postUrl, changes: post}}));
  }

}

post.component.html：

  <div class="title">
    {{(post$ | async)?.title}}
  </div>

  <div class="content">
    {{(post$ | async)?.content}}
  </div>

  <img [src]="(post$ | async)?.imageSrc">

  <div >
    <div  *ngFor="let category of (post$ | async)?.categories">
      {{category}}
    </div>
  </div>

  <form [formGroup]="formGroup">
    Update Post: <br>
    <input type="text" placeholder="Title..." formControlName="title"> <br>
    <textarea placeholder="Content..." formControlName="content"></textarea> <br>
    <button (click)="updatePost(formGroup.value)">Update</button>
  </form>

我試圖這樣做只是為了學習 ngrx 中的作業原理。

抱歉問了這么長的問題，但我真的厭倦了這個問題。

uj5u.com熱心網友回復：

問題在這里

 if(localStorage.getItem('theSelectedPost') !== null) {
      this.store.dispatch(setSelectedPost({post: localStorage.getItem('theSelectedPost')}));
 }

您正在string從 localStorage讀取 a然后將其傳遞給狀態。JSON.parse在保存到商店之前，您至少可以修復它。

從 localStorage 讀取并寫入它聽起來像是 Effects 的一個很好的用例。我會把這個邏輯放在那里。

我建議您撰寫更多型別安全的代碼來消除此類錯誤。

標籤：有角的 打字稿 本地存储 ngrx

上一篇：為顏色離子角提供自定義名稱

下一篇：按鈕顯示或隱藏內容-angularBehaviourSubject