我最近在@ngrx/store学习Angular 6,而其中一个教程是使用@ngrx/store进行状态管理,但我不明白在场景后面使用@ngrx/store的好处.
例如,对于简单的登录和注册操作,以前通过使用该服务(让我们称之为AuthService),我们可以使用它来调用后端api,在AuthService中存储"userInfo"或"token",将用户重定向到"HOME"在我们需要通过使用DI获取userInfo的任何组件中注入AuthService,只需要一个文件AuthService处理所有内容.
现在,如果我们使用@ngrx/store,我们需要定义Action/State/Reducer/Effects/Selector,它可能需要写入4或5个文件来处理上述动作或事件,然后有时我们还需要调用backend api使用服务,这看起来要复杂多余......
在其他一些场景中,我甚至看到一些页面使用@ngrx/store来存储对象或对象列表,如网格数据.,是对某种内存存储使用情况的？
回到这个问题,为什么我们在Angular项目中使用@ngrx/store而不是服务注册存储？ 我知道这是用于" 国家管理 "的用法,但究竟什么是"国家管理"？这是什么类似事务日志,我们什么时候需要它？我们为什么要在前端管理它？请随时在@ngrx /商店区分享您的建议或经验!
最近,ngrx商店改变了在角度应用程序中注册商店变量的方式.
StoreModule.forRoot()和StoreModule.forFeature()之间的区别是什么
我们是否需要注册才能使应用程序正常工作？
我们刚刚将其中一个应用程序升级到Angular 5,并开始转换为rxjs v5.5中引入的lettable 运算符.
因此,我们使用.pipe()运算符将可观察的管道重写为新语法.
我们之前的代码看起来像这样,如果抛出错误,则.catch()内部.switchMap()不会中断效果的运行.
@Effect()
loadData$ = this.actions$
.ofType(LOAD_DATA)
.map((action: LoadData) => action.payload)
.withLatestFrom(this.store.select(getCultureCode))
.switchMap(([payload, cultureCode]) => this.dataService.loadData(payload, cultureCode)
.map(result => {
if (!result) {
return new LoadDataFailed('Could not fetch data!');
} else {
return new LoadDataSuccessful(result);
}
})
.catch((err, caught) => {
return Observable.empty();
});
);
如果在调用中抛出错误dataService,它将被捕获并处理(简化了错误处理).
有了新的语法和用法.pipe(),我们现在有了这个
@Effect()
loadData$ = this.actions$
.ofType(LOAD_DATA)
.pipe(
map((action: LoadData) => action.payload),
withLatestFrom(this.store.select(getCultureCode)),
switchMap(([payload, cultureCode]) => this.dataService.loadData(payload, cultureCode)),
map(result => …注意:为简单起见,请将组件深度视为:
- Smart (grand)parent level 0
- dumb child level 1
....
- dumb grandchild level 2
....)
有关智能/大/父/子组件如何在MULTI-LEVEL(至少3级)链上下传递和传递数据的各种选项和条件.我们希望将"智能"(宏)父组件保留为可以访问我们的数据服务(或原子/不可变存储)的唯一组件,并且它将促使与'哑'(大)子项交换信息.我们看到的选项是:
现在在'3'的情况下,愚蠢的(大)孩子必须注入消息服务.这让我想到了我的问题:
Q1:对于每个'哑'(大)孩子来说,注入一个消息服务似乎很奇怪.消息服务的最佳做法是为这个家庭提供专门的服务,还是重新回到上面提到的"智能"祖父母的数据服务？
Q1A:另外,如果所有组件都注入了服务,那么这比在链上下添加@ Input/@输出绑定要好得多吗？(我看到'哑'组件需要一些方法来获取信息的论点)
Q2:如果'聪明'的盛大父母正在与类似redux的商店(我们的ngrx)进行通信怎么办？与'哑'组件的通信最好通过注入/专用消息服务进行,或者最好将商店注入每个'哑'组件......或者？注意,除了数据(即向/更新商店或服务添加数据)之外,组件间通信是"动作"(例如:表单验证,禁用按钮等)的组合.
非常感谢!
我有这样的副作用:
@Effect()
FetchAllOrders$ = this.actions$
.ofType(SalesOrderActions.FETCH_ALL_ORDERS)
.switchMap((action: Action) => {
return this.soApiService.getUsersSalesOrders(action.payload);
})
.map((salesOrders: ListDto<SalesOrderList>) => this.actions.fetchAllOrdersSuccess(salesOrders));
我想在效果开始时显示加载符号并在结尾隐藏它.
我创建了一组独立的Actions,Reducers和store状态来处理显示加载符号.
export class BusyActions {
static SHOW_SPINNER = "SHOW_SPINNER";
static HIDE_SPINNER = "HIDE_SPINNER";
showSpinner(): Action {
return { type: BusyActions.SHOW_SPINNER };
}
hideSpinner(): Action {
return { type: BusyActions.HIDE_SPINNER };
}
export const BusyState: IBusyState = {
visible: false,
busy: false
};
我这样做是因为加载状态需要与其他模块,状态等共享.
如何从副作用中调用我的BusyActions？我需要在开始时调用SHOW_SPINNER,最后调用HIDE_SPINNER.
我做得对吗？或者有更好的方法来处理这个问题吗？
我对这个问题有自己的看法,但最好仔细检查并确定.感谢您的关注并尝试提供帮助.这里是:
想象一下,我们正在调度一个触发一些状态变化的动作,并且还附加了一些效果.所以我们的代码必须做两件事 - 改变状态并做一些副作用.但这些任务的顺序是什么？我们是在同步吗？我相信,首先,我们改变状态,然后做副作用,但有可能,这两个任务之间可能会发生其他事情吗？像这样:我们改变状态,然后在我们之前做过的HTTP请求上得到一些响应并处理它,然后做副作用.
[编辑:]我决定在这里添加一些代码.而且我也简化了它.
州:
export interface ApplicationState {
loadingItemId: string;
items: {[itemId: string]: ItemModel}
}
操作:
export class FetchItemAction implements Action {
readonly type = 'FETCH_ITEM';
constructor(public payload: string) {}
}
export class FetchItemSuccessAction implements Action {
readonly type = 'FETCH_ITEM_SUCCESS';
constructor(public payload: ItemModel) {}
}
减速器:
export function reducer(state: ApplicationState, action: any) {
const newState = _.cloneDeep(state);
switch(action.type) {
case 'FETCH_ITEM':
newState.loadingItemId = action.payload;
return newState;
case 'FETCH_ITEM_SUCCESS':
newState.items[newState.loadingItemId] = action.payload;
newState.loadingItemId = null;
return newState;
default: …我@ngrx/store在我的angular(4.x)应用程序中有包,我从v 2.2.2 - > v 4.0.0升级.我可以看到迁移说明说:
已从Action界面中删除有效内容属性.
然而,他们给出的例子似乎完全违反直觉(在我看来......).
我有一个reducer函数,如下所示:
export function titleReducer(state = { company: 'MyCo', site: 'London' }, action: Action): ITitle {
switch (action.type) {
case 'SET_TITLE':
return {
company: action.payload.company,
site: action.payload.site,
department: action.payload.department,
line: action.payload.line
}
case 'RESET':
return {
company: 'MyCo',
site: 'London'
}
default:
return state
}
}
正如预期的那样抛出打字稿错误:
[ts]"行动"类型中不存在属性"有效负载"
但是我从迁移指南中不知道这应该改变什么.有任何想法吗？
问题: 错误:商店没有提供商!
我在main.ts中引导商店模块:
platformBrowserDynamic().bootstrapModule(AppModule,[
provideStore({
characters,
vehicles
})
]);
并注入vehicle.component.ts:
constructor(
private _route: ActivatedRoute,
private _router: Router,
private _vehicleService: VehicleService,
private _store: Store<any>
) {}
完整的源代码在这里:GitHub,在GitHub Pages上运行的最新版本
PS.将Store添加到提供程序会导致另一个错误:无法解析Store的所有参数:(？,？,？).
我正在使用带有Angular和ngrx/store和ngrx/effects的redux风格的状态管理设计.每当我不从效果中返回动作时,我都会收到错误:
Cannot read property 'type' of undefined
我研究了这个问题,发现在榆树架构中有一种称为"noop"的动作,当你不想用你的效果链接另一个动作时,你可以调用任何东西.在任何地方召唤这种noop行动对我来说都是非常重复的.我想知道这是否是一个不好的做法.有没有理由你不能产生不返回动作的效果？效果的意图总是有1个动作引发另一个动作吗？我想知道我是否误解了如何使用效果.
谢谢!
可以影响像Promise.all这样的两个动作吗？例:
@Effect()
pulic addUser() {
return this.actions$.ofType(user.ADD)
.switchMap(() => {
return this.userService.add();
})
.map(() => {
return new user.AddSuccessAction();
});
}
@Effect()
pulic addUserOptions() {
return this.actions$.ofType(userOptions.ADD)
.switchMap(() => {
return this.userOptionsService.add();
})
.map(() => {
return new userOptions.AddSuccessAction();
});
}
@Effect()
public complete() {
return this.actions$.ofType(user.ADD_SUCCESS, userOptions.ADD_SUCCESS)
// how to make it works like Promise.all ?
.switchMap(() => {
return this.statisticService.add();
})
.map(() => {
return new account.CompleteAction();
});
}
更新 我想要实现的是Promise.all的simillar行为.如何并行调度两个效果,等待所有效果都解决,然后发出第三个动作.像https://redux-saga.js.org/docs/advanced/RunningTasksInParallel.html这样的承诺它是非常明显的:
Promise.all([fetch1, fetch2]).then(fetch3);
是否有可能在ngrx /效果？或者在ngrx /效果中它是错误的方式？ …
ngrx-store ×10
angular ×9
ngrx ×6
ngrx-effects ×5
angular5 ×2
typescript ×2
angular6 ×1
javascript ×1
redux ×1
rxjs ×1