带你初步了解Angular的全局状态管理ngrx

---

Angular ngrx website: https://ngrx.io/docs.

---

1. Principle

1.1 Diagram

1.2 Step

• 所有状态都会存储到store中，store里面的数据只能通过reducer来修改
• 在component里面，通过一些事件(点击)去触发action，最后action被reducer接收，来修改store里面的数据
• 随着component越来越多，store中的数据也越来越复杂，如果component直接去拿，会有很多逻辑在component，为了减少component代码，可以通过selector去拿component需要的数据，然后component再从selector中拿数据
• effects是用来处理异步操作，首先过滤action，通过调用service，向服务器发送请求，返回结果再去触发action，修改store。

2. Install

Angular ngrx command: https://ngrx.io/guide/schematics/store.

• @ngrx/store：全局状态管理模块
• @ngrx/effects：处理副作用
• @ngrx/store-devtools：浏览器调试工具，需要依赖 Redux Devtools Extension
• @ngrx/schematics：.命令行工具，快速生成 NgRx 文件
• @ngrx/entity：提高开发者在 Reducer 中操作数据的效率
• @ngrx/router-store：将路由状态同步到全局 Store

• 安装所有的包
  npm install @ngrx/store @ngrx/effects @ngrx/entity @ngrx/router-store @ngrx/store-devtools @ngrx/schematics

2.1 Config angular

• ng config cli.defaultCollection @ngrx/schematics
  

2.2 Create Store

• create store command
  旧语法（会报警）：ng g store State --root --module app.module.ts --statePath store --stateInterface AppState
  新语法：ng g store State --root --module app.module.ts --state-path store --state-interface AppState
  
• result
  上面的命令会创建一个文件，app/store/index.ts
  

2.3 Create Action

• create action command
  旧语法（会报警）：ng g action actions/counter --skipTests
  新语法：ng g action actions/counter --skip-tests
  
• 如果携带参数，请使用props
  参考上面图片

2.4 Create Reducer

• create action command
  旧语法（会报警）：ng g reducer reducers/counter --skipTests --reducers=…/store/index.ts
  新语法：ng g reducer reducers/counter --skip-tests --reducers=…/store/index.ts --skip-tests
  
• app.module.ts中导入reducer
  

2.5 Trigger Action

• create component
  语法：ng g components/counter --skip-tests
  

2.6 Create Selector

• create selector command
  旧语法（会报警）：ng g selector selectors/counter --skipTests
  新语法：ng g selector selectors/counter --skip-tests
  
• 通过createFeatureSelector找到对应的reducer
• 通过createSelector拿到reducer操作的数据
• 页面显示
  1.先在component中声明一个属性接收
  2.在构造函数中初始化store
  3.this.count = this.store.pipe(select(selectCount))

2.7 MetaReducer

• 类似于钩子函数，每次执行action都会触发
• 写一个方法，参数很固定 =>(reducer:ActionReducer):ActionReducer，将其放到metaReducers里面
• 确认app.module.ts
  

function logger(reducer:ActionReducer<AppState>):ActionReducer<AppState>{
  return function(state,action){
    //return reducer(state,action)
    let result =  reducer(state,action)
    console.log('最新的状态',result)
    console.log('上一次的状态',state);
    console.log('具体的action',action)
    return result;
  }
}

//MetaReducer相当于一个钩子函数，在action之前执行
// ?带表非正式环境
// :代表正式环境
export const metaReducers: MetaReducer<AppState>[] = !environment.production ? [] : [];

2.8 EntityState

• 官方为了约束数据格式定义了接口。我们直接拿来用
  
• reducer中的state直接继承
• 固定代码，声明一个adapter
• 使用adapter初始化
  adapter.getInitialState()
  
• createReducer中可以使用的方法
  
• 写入使用adapter，查询也要用adapter
  

2.9 Effect

• create effect command
  旧语法（会报警）：ng g effect effects/counter --root --module app.module.ts --skipTests
  新语法：ng g effect effects/counter --root --module app.module.ts --skip-tests
• create effect command
  this.actions$ 这个表示会过滤所有的action
  ofType 表示只有这个action会触发effect
  mergeMap 将多个方法合并

2.10 Router-store

• 导入包到app.module.ts
  
• 导入到store/index.ts
  router: fromRouter.RouterReducerState
router: fromRouter.routerReducer
  
• create selector
  ng g selectors/router --skip-tests
• consolr log
  

3. Demo

4. Awakening

         在一秒钟内看到本质的人和花半辈子也看不清一件事本质的人，自然是不一样的命运。