创建关于用户状态的还原器
我正在尝试在我当前的前端项目中应用reflux/ngrx。
我想利用这一点来改变一个轻微的功能:更改当前与用户相关的任务，以便使用单个用户状态。
当前与用户相关的任务:目前，我正在使用传统的模型来实现用户登录过程.UserService能够检查用户凭据。一旦检查完毕，我就将用户信息存储在AppService上
export class LoginComponent implements OnInit {
private fb: FormBuilder;
private form:FormGroup;
private commty: UsersService;
private router: Router;
private appState: AppState;
private alerts: Array<Object>;
constructor()
{
this.alerts = [];
}
ngOnInit():void {
this.form = this.fb.group({
user: ['', Validators.required],
passwd: ['', Validators.minLength(6)]
});
}
public checkPasswd():void {
this.clearAlerts();
this.commty.checkPasswd(this.form.value.mail, this.form.value.passwd)
.subscribe(
(result: any) => {
this.appState.user = result;
this.router.navigate(['/app']);
},
(error: any) => {
this.addAlert(error.message);
}
);
}
private addAlert(message: string): void {
this.alerts.push({type: 'danger', msg: message});
}
public closeAlert(index): void {
this.alerts.splice(index, 1);
};
private clearAlerts(): void {
this.alerts.splice(0, this.alerts.length);
}
}我对如何移动这段代码以使用reflux/ngrx感到有点困惑。我读过一些关于这个主题的文章，但是我不太清楚如何移动我的代码。到目前为止，我已经创建了一个Store和User接口：
store.interface.ts
export interface IStore {
user: IUser
sources: ISourceRedux;
}user.interfcae.ts
export interface IUser {
id: string;
name: string;
username: string;
customer: string;
}下一步我认为我需要做的是创建减速机。这是我不太明白如何构建这段代码的步骤。直到现在
user.initialstate.ts
export function initialUserState(): IUser {
return {
id: '',
name: '',
username: '',
customer: '',
sources: []
};
};user.reducer.ts
export class User {
private static reducerName = 'USER_REDUCER';
public static reducer(user = initialUserState(), {type, payload}: Action) {
if (typeof User.mapActionsToMethod[type] === 'undefined') {
return user;
}
return User.mapActionsToMethod[type](user, type, payload);
}
// ---------------------------------------------------------------
// tslint:disable-next-line:member-ordering
private static mapActionsToMethod = {};
}我应该创建哪些减速器，以便：
- 检查一下证件。
- 如果凭据正确，请获取此用户并更新用户状态存储。
- 如果凭据错误，请通知进程已失败。
也许我在合并概念..。我需要一些灯..。
编辑
public connect(user: string, currentPasswd: string, extraHttpRequestParams?: any): Observable<UserDTO> {
return this.checkPasswdWithHttpInfo(id, currentPasswd, extraHttpRequestParams)
.map((response: Response) => {
if (response.status === 204) {
return undefined;
} else {
return response.json();
}
}).catch((error: any) => {
if (error.status >= 500) {
return Observable.throw(new Error(error.status));
}
else { //if (error.status >= 400) {
const body = error.json() || '';
const code = body.error || JSON.stringify(body);
const message = body.message || JSON.stringify(body);
return Observable.throw(ApiError.create(code, message));
}
});
}回答 1
Stack Overflow用户
发布于 2017-02-08 13:39:39
好，这是你的"将ngrx集成到我的代码中“=的下一个问题。
你要找的是：https://github.com/ngrx/effects
效果背后的想法是，一个效果可以让您捕获一个Action，做一些副作用(API调用或其他什么)，然后您可以分派另一个操作(通常是成功或错误)。
连接用户的流示例:
--从组件调度动作USER_CONNECT中提取
-来自user.effect.ts
-抓住行动ofType('USER_CONNECT')
-做你需要做的事(API调用ex)
-当回复回来时
-如果成功:派遣USER_CONNECT_SUCCESS
-如果出错:调度USER_CONNECT_ERROR
当然，当您分派USER_CONNECT_SUCCESS或USER_CONNECT_ERROR时，您可以在payload中传递其他数据(例如，用户信息或错误)。
下面是一个完整的例子：
@Injectable()
export class UsersEffects {
constructor(
private _actions$: Actions,
private _store$: Store<IStore>,
private _userService: UserService,
) { }
@Effect({ dispatch: true }) userConnect$: Observable<Action> = this._actions$
.ofType('USER_CONNECT')
.switchMap((action: Action) =>
this._userService.connect(action.payload.username, action.payload.password)
.map((res: Response) => {
if (!res.ok) {
throw new Error('Error while connecting user !');
}
const rslt = res.json();
return { type: 'USER_CONNECT_SUCCESS', payload: rslt };
})
.catch((err) => {
if (environment.debug) {
console.group();
console.warn('Error catched in users.effects.ts : ofType(USER_CONNECT)');
console.error(err);
console.groupEnd();
}
return Observable.of({
type: 'USER_CONNECT_ERROR',
payload: { error: err }
});
})
);
}如果我做了类似的事情，您可以查看我的项目披萨同步 (除了在发生错误时不捕捉，如果有错误也不发送)。
https://stackoverflow.com/questions/42108303
复制相似问题
腾讯云开发者
