试图将数组保存到 ngrx 状态答案

【问题标题】：trying to save an array to ngrx state试图将数组保存到 ngrx 状态
【发布时间】：2021-09-29 17:54:26
【问题描述】：

我正在尝试使用 ngrx 效果保存从 api 调用获得的数组，然后简单地 *ngfor 该数组。我正在尝试使用ngrx，但它使事情变得更加复杂。我将一个数组传递给减速器，但 state.comics 显示像这样comics: [0: {0: {..}, 1:{..}]，而我想要的只是comics: [0: {..}, 1: {..}]j。所以reducer不会将数组保存到漫画中，而是推到0然后创建更多对象。

comics.data.results 是一个数组

行动：

import { createAction, props } from '@ngrx/store';

export const getComics = createAction('[Comics] Get comics');
export const getComicsSuccess = createAction(
  '[Comics] Success Get Comics',
  (comics: any) => comics
);

效果.ts

@Injectable()
export class ComicEffects {
  loadComics$ = createEffect(() =>
    this.action$.pipe(
      ofType(getComics),
      exhaustMap(() =>
        this.dataService.getComics().pipe(
          map((comics) => {
            console.log(comics.data.results);
            return getComicsSuccess(comics.data.results);
          })
          /* catchError(() => EmptyError) */
        )
      )
    )
  );

  constructor(
    private action$: Actions,
    private dataService: MarvelServiceService
  ) {}
}

减速机：

import { createReducer, on } from '@ngrx/store';
import { getComicsSuccess } from '../Actions/comics.action';

const initialState: any = [];

export const comicReducer = createReducer(
  initialState,
  on(getComicsSuccess, (state, data) => [...state, data])
);

html:

<ul>
  <li *ngFor="let comic of comics$ | async; index as i">
    {{ i + 1 }}
  </li>
</ul>

组件：

export class ComicsComponent implements OnInit {
  comics$ = this.store.select((state) => state.comics);

  constructor(private store: Store<any>) {}

  ngOnInit() {
    this.getAllComics();
  }

  getAllComics() {
    this.store.dispatch(getComics());

  }
}

app.module:

 StoreModule.forRoot({ comics: comicReducer }),

【问题讨论】：

标签： angular redux ngrx

【解决方案1】：

我猜comics.data.results 也是一个数组。

因此，如果您需要将其保存为状态，您也需要在其上使用扩展运算符。所以这一切都可以是一个单一的数组。

// Action
import { createAction, props } from '@ngrx/store';

export const getComicsSuccess = createAction('[Comics] Success Get Comics', props<{ comics: any[] }>());

// Effect
this.dataService.getComics().pipe(
  map((getComics: any) => {
    return getComicsSuccess({ comics: getComics.data.results });
  })
);

//Reducer
export const comicReducer = createReducer(
  initialState,
  on(getComicsSuccess, (state, {comics}) => [...state, ...comics])
);

【讨论】：

你说的很有道理，我已经试过了，我得到 ERROR TypeError: results is not iterable，所以它似乎没有将数组传递给减速器，尽管这就是我正在做的事情。
@artworkjpm 你是对的我错过了在减速器中你需要析构数据以获得你需要的东西。我编辑了代码。希望它有效！我也改变了动作道具。我不知道你用的是什么，但我通常使用道具。
谢谢，它使用了似乎有效的析构函数 {}，以及动作中的道具。

【解决方案2】：

如果您输入您的操作，它会有所帮助。 comics: any 会射你的脚，就像现在一样。

我怀疑应该和这个类似。

export const comicReducer = createReducer(
  initialState,
  on(getComicsSuccess, (state, action) => [...state, action.comics])
);

【讨论】：