angular 9打造用户系统 - 2使用ngrx store和reducer来加载用户列表

楚天乐 100 0 条

angular 9打造用户系统-2

本片使用ngrx store和ngrx reducer加载用户列表

github代码:https://github.com/shyandsy/angular-9-ngrx-user-mamagement

原教程视频连接

步骤

  1. 安装ngrx依赖
npm install @ngrx/store @ngrx/effects @ngrx/entity @ngrx/store-devtools @ngrx/router-store
  1. 创建第一个action和reducer

创建src\app\users\user.model.ts

import { Time } from '@angular/common'

export interface User{
    id?: number;
    username: string;
    cnname: string;
    enname: string;
    password?: string;
    role_id: number;
    email: string;
    telephone: string;
    mobile: string;
    fax: string;
    address: string;
    post: string;
    token: string;
    expired: Time;
    status: number;
    ip: string;
}

创建src\app\users\user.service.ts, 稍后实现
创建src\app\users\state文件夹

创建src\app\users\state\user.actions.ts
创建src\app\users\state\user.reducer.ts

11.png

  1. 修改src\app.module.ts
//加入
import { StoreModule } from '@ngrx/store';

imports: [
    BrowserModule,

    // 加入这行
    StoreModule.forRoot({}), // 在module中添加reducer

    AppRoutingModule,
  ],
  1. 修改src\app\users\users.module.ts
//加入
import { StoreModule } from '@ngrx/store';
import { userReducer } from './state/user.reducer';

imports: [
    CommonModule,
    RouterModule.forChild(userRoutes),

    // 加入,给user module添加UserReducer
    StoreModule.forFeature("users", userReducer),
  ],
  1. 编写userReducer, src\app\users\state\user.reducer.ts
import { formatDate } from '@angular/common';

// 定义一个initialState
let date = new Date();
const initialState = {
    users: [
        {
            username: "shyclouds",
            cnname: "李连杰",
            enname: "Jack Li",
            password: "",
            role_id: 1,
            email: "shyclouds@shyclouds.com",
            telephone: "01022334441",
            mobile: "13122334455",
            fax: "01022334442",
            address: "北京市长安街128号",
            post: "10001",
            token: "xxxxx",
            expired: new Date(),
            status: 1,
            ip: "127.0.0.1",
        }
    ],
    loading: false,
    loaded: true,
}

// 定义userReducer
export function userReducer(state = initialState, action){
    switch(action.type){
        case "LOAD_USERS":{
            return {
                ...state,
                loading: true,
                loaded: false,
            }
        }
        default: {
            return state;
        }
    }
}
  1. 修改src\app\users\user-list\user-list.component.ts,加载数据

import { Component, OnInit } from '@angular/core';

// 加入这行
import { Store } from '@ngrx/store';

// 引入User model
import {User} from './../user.model';

import { THIS_EXPR } from '@angular/compiler/src/output/output_ast';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit {
  //存储当前users
  users: User[];

  // 注入store
  constructor(private store: Store<any>) { }

  ngOnInit(): void {
    // 加载users
    this.store.dispatch({type: 'LOAD_USERS'});
    // 订阅state.users
    this.store.subscribe(state => (this.users = state.users.users));
  }
}
  1. 修改模板src\app\users\user-list\user-list.component.html
<h3>Users</h3>
<table class="table table-hover">
    <thead>
        <tr class="table-primary">
            <th scope="col">用户名</th>
            <th scope="col">角色</th>
            <th scope="col">中文名</th>
            <th scope="col">英文名</th>
            <th scope="col">Email</th>
            <th scope="col">电话</th>
            <th scope="col">手机</th>
            <th scope="col">传真</th>
            <th scope="col">地址</th>
            <th scope="col">邮编</th>
            <th scope="col">状态</th>
            <th scope="col">操作</th>
        </tr>
    </thead>
    <tbody>
        <!--输出user-list.component中的users列表-->
        <tr *ngFor="let user of users">
            <th scope="row">{{user.username}}</th>
            <td>{{user.role_id}}</td>
            <td>{{user.cnname}}</td>
            <td>{{user.enname}}</td>
            <td>{{user.email}}</td>
            <td>{{user.telephone}}</td>
            <td>{{user.mobile}}</td>
            <td>{{user.fax}}</td>
            <td>{{user.address}}</td>
            <td>{{user.post}}</td>
            <td>{{user.status}}</td>
            <th>
                <a>修改</a>
                <br>
                <a>删除</a>
            </th>
        </tr>
    </tbody>
</table>

最终效果

11.png



发表我的评论
昵称 (必填)
邮箱 (必填)
网址