ngrx удаление элемента из списка при использовании отправки - PullRequest
Новая
       7

ngrx удаление элемента из списка при использовании отправки

0 голосов
/ 24 апреля 2020

У меня angular 8 заявка. И я использую ngrx для управления состоянием.

Но проблема в том, что если я попытаюсь удалить элемент, он будет перенаправлен на другую вкладку. и не удаляя элемент.

Итак, у меня есть:

Редуктор: 

const intialState: Tutorial = {
  name: 'initial State',
  url: 'http://google.com'
};

export function tutorialReducer(state: Tutorial[] = [intialState], action: TutorialActions.Actions) {
  switch (action.type) {
    case TutorialActions.ADD_TUTORIAL:
      return [...state, action.payload];
    case TutorialActions.DELETE_TUTORIAL:
      state.splice(action.payload, 1);
      return state;
    default:
      return state;
  }
}

Действия: 

export class AddTutorial implements Action {
  readonly type = ADD_TUTORIAL;

  constructor(public payload: Tutorial) {}
}

export class RemoveTutorial implements Action {
  readonly type = DELETE_TUTORIAL;

  constructor(public payload: number) {}
}

export type Actions = AddTutorial | RemoveTutorial;

и удаление шаблона: 

<div class="right" *ngIf="tutorials$">
  <h3>Tutorials</h3>

  <ul>
    <li (click)="delTutorial(i)" *ngFor="let tutorial of tutorials$ | async; let i = index">
      <a [href]="tutorial.url" target="_blank">{{ tutorial.name }}</a>
    </li>
  </ul>
</div>

и ts-код: 

export class ReadComponent implements OnInit {

  tutorials$: Observable<Tutorial[]>;

  constructor(private store: Store<AppState>) {
  this.tutorials$ = this.store.select('tutorial');
  }

 delTutorial(index){
    this.store.dispatch(new TutorialActions.RemoveTutorial(index));
  }
  ngOnInit() {
  }

}

и app.module.ts: 

 imports: [
    BrowserModule,
    StoreModule.forRoot({tutorial: tutorialReducer}),
    AppRoutingModule
  ],

Но поэтому он не удаляет элемент, а фактически открывает новую вкладку.

И тогда я получаю эту ошибку: 

core.js:9110 ERROR TypeError: Cannot assign to read only property '5' of object '[object Array]'
    at Array.splice (<anonymous>)
    at tutorialReducer (tutorial.reducers.ts:16)
    at combination (store.js:303)
    at store.js:1213
    at store.js:38

Так что я должен изменить? Так что вы можете удалить элемент из списка?

Спасибо

Ответы [ 2 ]

2 голосов
/ 24 апреля 2020

Государство является неизменным. Таким образом, вы не можете изменить состояние редуктора. Вы должны вернуть новое измененное значение без изменения текущего состояния. 

case TutorialActions.DELETE_TUTORIAL:
  let newState = [...state]; 
  newState.splice(action.payload, 1);
  return newState;
1 голос
/ 24 апреля 2020

Я рекомендую следующие вещи:

  • вам следует избегать прямого изменения состояния.
  • Создать копию своего состояния и затем выполнить операцию
  • Еще одна вещь Следует помнить, что сплайс принимает первый аргумент в качестве индекса элемента, который вы хотите удалить.
  • Найдите индекс полезной нагрузки или элемента из массива

  • Затем используйте этот индекс склеить элемент массива.

  • Например: 

var array = [...state]; // make a separate copy of the array or state
  var index = array.indexOf(your_payload_toberemoved)
  if (index !== -1) {
    array.splice(index, 1);
   return array
  }

Надеюсь, вы найдете эти пункты полезными.

...