javascript - Angular 与 ngrx - 没有任何事情发生
问题描述
我有问题。目前我从头开始学习 NgRx。我创建了 Angular 项目,添加了新的汽车组件。接下来添加ngrx state、actions、reducer和effects。当我运行我的项目时,我没有任何错误,尽管设置了错误的 API url,当我设置正确的 url 时,仍然没有发生。
当我将控制台日志添加到减速器时,我在控制台中看到了这一点。但是,当我将控制台日志添加到消息为 true 的 car.effects.ts 时,则不显示。
我的应用代码:Reducer
import { Action } from '@ngrx/store';
import * as CarActions from './car.actions';
import { Car } from 'src/models/car.model';
const initialState: Car = {
brand: '',
model: ''
};
export function carReducer(state: Car[] = [initialState], action: CarActions.Actions) {
switch (action.type) {
case CarActions.ADD_CAR:
return [...state, action.payload];
case CarActions.ADD_CAR_FAIL:
return {
...state,
carError: action.payload,
};
default:
return state;
}
}
状态
import { Car } from './../../models/car.model';
export interface AppState {
readonly car: Car;
}
行动
import { Action } from '@ngrx/store';
import { Car } from './../../models/car.model';
export const ADD_CAR = '[CAR] Add';
export const ADD_CAR_FAIL = '[CAR] Fail';
export class AddCar implements Action {
readonly type = ADD_CAR;
constructor(public payload: Car) {}
}
export class AddCarFail implements Action {
readonly type = ADD_CAR_FAIL;
constructor(public payload: string) {}
}
export type Actions = AddCar | AddCarFail;
效果
import { Actions, Effect, ofType } from '@ngrx/effects';
import * as CarActions from './car.actions';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { switchMap, catchError, map, tap } from 'rxjs/operators';
import { of } from 'rxjs';
@Injectable()
export class CarEffects {
@Effect()
carAdd = this.actions$.pipe(
ofType(CarActions.ADD_CAR),
switchMap((carData: CarActions.AddCar) => {
console.log('true');
return this.http.post('http://myapi.com/api', { brand: carData.payload.brand, model: carData.payload.model }).pipe(map(resData => {
localStorage.setItem('test', 'asdasdasd');
}),
catchError(errorRes => {
console.log(errorRes);
const errorMessage = 'An unknown error occurred!';
if (!errorRes.error || !errorRes.error.error) {
return of(new CarActions.AddCarFail(errorMessage));
}
console.log(errorRes.error.error.message);
return of(new CarActions.AddCarFail(errorRes.error.error.message));
}));
})
);
constructor(
private actions$: Actions,
private http: HttpClient) { }
}
应用模块.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CarComponent } from './car/car.component';
import { StoreModule } from '@ngrx/store';
import { carReducer } from './car/car.reducer';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent,
CarComponent
],
imports: [
BrowserModule,
StoreModule.forRoot({car: carReducer}),
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
我安装了 store-devtools 并且在控制台中有:
ERROR in node_modules/@ngrx/store-devtools/src/config.d.ts(2,10): error TS2305: Module '"C:/Users/Sebastian/Documents/ngrx-angular/node_modules/@angular/core/core"' has no exported member 'OpaqueToken'.
node_modules/@ngrx/store-devtools/src/devtools.d.ts(1,10): error TS2305: Module '"C:/Users/Sebastian/Documents/ngrx-angular/node_modules/@ngrx/store/store"' has no exported member 'Dispatcher'.
node_modules/@ngrx/store-devtools/src/devtools.d.ts(1,22): error TS2305: Module '"C:/Users/Sebastian/Documents/ngrx-angular/node_modules/@ngrx/store/store"' has no exported member 'Reducer'.
node_modules/@ngrx/store-devtools/src/extension.d.ts(1,10): error TS2305: Module '"C:/Users/Sebastian/Documents/ngrx-angular/node_modules/@angular/core/core"' has no exported member 'OpaqueToken'.
node_modules/@ngrx/store-devtools/src/instrument.d.ts(2,10): error TS2305: Module '"C:/Users/Sebastian/Documents/ngrx-angular/node_modules/@ngrx/store/store"' has no exported member 'Reducer'.
解决方案
我做了一些小的修改。你使用了错误的版本
{
"name": "ngrx-angular",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~7.2.0",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"@ngrx/effects": "^7.4.0",
"@ngrx/store": "^7.4.0",
"@ngrx/store-devtools": "^7.4.0",
"core-js": "^2.5.4",
"rxjs": "~6.3.3",
"rxjs-compat": "^6.5.2",
"save": "^2.4.0",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.13.0",
"@angular/cli": "~7.3.8",
"@angular/compiler-cli": "~7.2.0",
"@angular/language-service": "~7.2.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
}
}
这里也改
imports: [
BrowserModule,
StoreModule.forRoot({ car: carReducer }),
HttpClientModule,
StoreDevtoolsModule.instrument({
maxAge: 5
})
],
结果
这里的公关
推荐阅读
- tfs - TFS 构建服务器上的 r 文件夹是什么
- c# - 如何获取作为文档字段的子项的 Solr Facets
- angular - ngbootstrap 不工作
- bigdata - 大数据与云计算有什么关系?
- latex - Jupyter 无法渲染 Latex 数学方程,排版数学 0%
- nfc - 什么是 Mifare 原生模式?
- react-native - 阿波罗突变“在这种环境中,分配的来源必须是一个对象”
- javascript - 使用提交按钮将 html 数据检索到表单输入中
- java - 使用 jersey 客户端发布登录 API 请求
- sql-server - 在不聚合的情况下旋转多个列 - 性能优化