NgRx存储问题:在reducer函数中传递的参数类型错误

Question

我想做一个简单的减速器工作。我从:[coursetro.com][1]复制了一个代码，但是当我完成更新app.module.ts时出现了问题。它给了我一个错误信息

Type '(state: Tutorial[] | undefined, action: Actions) =>Tutorial[]'不能赋值给类型'ActionReducer<Tutorial[]，>'。参数"action"one_answers"action"的类型不兼容。类型'Action'不能赋值给类型'Actions'。属性'payload'在类型'Action'中缺失，但在类型'RemoveTutorial'中需要。

我假设，从错误消息中，我以某种方式尝试将参数2，类型Action传递给接受类型Actions的函数。我知道我传递了TutorialActions类型。它应该等于Action类型。但也许我应该使用强制类型转换来让它工作因为如果它输入了&;tutorialactions。action &;而不是"行动";

?我想使这个解决方案尽可能简单。[1]: https://coursetro.com/posts/code/151/Angular-Ngrx-Store-Tutorial--Learn-Angular-State-Management

一些代码:reducer.ts

import { Action } from '@ngrx/store'
import { Tutorial } from './../models/tutorial.model'
import * as TutorialActions from './../actions/tutorial.actions'

const initialState: Tutorial = {
name: 'Initial Tutorial',
url: 'http://google.com'
}
export function reducer(state: Tutorial[] = [initialState], action: TutorialActions.Actions) 
{

switch(action.type) {
case TutorialActions.ADD_TUTORIAL:
return [...state, action.payload];
default:
return state;
}
}

动作:

import { Injectable } from '@angular/core'
import { Action } from '@ngrx/store'
import { Tutorial } from '../models/tutorial.model'
export const ADD_TUTORIAL       = '[TUTORIAL] Add'
export const REMOVE_TUTORIAL    = '[TUTORIAL] Remove'
export class AddTutorial implements Action {
readonly type = ADD_TUTORIAL
constructor(public payload: Tutorial) {}
}

export class RemoveTutorial implements Action {
readonly type = REMOVE_TUTORIAL
constructor(public payload: number) {}
}
export type Actions = AddTutorial | RemoveTutorial

app.module.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Store } from '@ngrx/store';
import { Tutorial } from './../models/tutorial.model';
import { AppState } from './../app.state';
@Component({
selector: 'app-read',
templateUrl: './read.component.html',
styleUrls: ['./read.component.scss']
})
export class ReadComponent implements OnInit {

tutorials: Observable<Tutorial[]>;

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

Answer 1

试试这个:

动作:

import { createAction, props } from '@ngrx/store';
import { Tutorial } from '../models/tutorial.model'
export const addTutorial = createAction('[TUTORIAL] Add', props<{payload: Tutorial}>());
export const removeTutorial = createAction('[TUTORIAL] Remove', props<{id: number}>());

减速器:

import { Action, createReducer, on } from '@ngrx/store';
import { Tutorial } from './../models/tutorial.model'
import * as tutorialActions from './../actions/tutorial.actions'
export const initialState: Tutorial[] = [];
const _tutorialsReducer = createReducer(initialState,
on(tutorialActions.addTutorial, (state, {payload}) => [...state, ...payload]),
on(tutorialActions.removeTutorial, (state, {id}) => {
return state.filter(t => t.id != id);
})
);
export function tutorialsReducer(state: any, action: Action) {
return _tutorialsReducer(state, action);
}

AppModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
...
// NgRx
import { StoreModule } from '@ngrx/store';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
StoreModule.forRoot({ tutorials: tutorialsReducer }),
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }