Question

我试图在我当前的前端项目中应用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));
                }
            });
    }

Answer 1

好的，这是你＆＃34; Integrate ngrx into my code＆＃34;的下一个问题。 =）。

您正在寻找的是：https://github.com/ngrx/effects

效果背后的想法是，一个效果让你捕捉一个动作，做副作用（API调用或其他），然后你可以派遣另一个动作（通常是成功或错误）。

当然，当您发送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 } }); }) ); }中传递其他数据（例如用户信息或错误）。

以下是一个完整的例子：

operator+

您可以查看我的项目Pizza-Sync我做了类似的事情（除非我发现错误并没有发现，如果发生错误则不发送）。

创建有关用户状态的reducer

1 个答案: