Basic Concepts of NgRx

[puddlejumper26]

NgRx

Courses

前五分钟解释 大概的使用流程 https://www.bilibili.com/video/BV1iJ411F7Bf?p=22

NGRX课程 https://www.bilibili.com/video/BV1nt4y127iP?p=3

简介 https://hijiangtao.github.io/2020/05/08/Angular-State-Management-Invest-Report/

[puddlejumper26]

What is NgRx

• ngrx/store的灵感来源于Redux，是一款集成RxJS的Angular状态管理库，由Angular的布道者Rob Wormald开发。它和Redux的核心思想相同，但使用RxJS实现观察者模式。它遵循Redux核心原则，但专门为Angular而设计。

NGRX Store 工作原理

第一次触发 Keep the data in the one way data flow

第二次触发，没有改变状态的情况下，就直接从Store发给组件了

什么时候使用 NgRx

• lot state, little services
• http request
• complex component interactions -> decouple and yet communicating

不是什么都可以放入Store

• 单独的状态
• Angular 的表单，因为无法通过dispatch 来发送状态
• 不是持续改变的状态

[puddlejumper26]

Difference between NgRx and normal Service

简单很多，不用再为一个组件写很多的服务

=========================

Back To Home

[puddlejumper26]

Redux Priciples

[puddlejumper26]

Reducer VS Multiple Reducers (Different States)

• 容易测试
• 分工明确
• 节约资源

Reducer VS Multiple Reducers (break State further into small sub-slice)

[puddlejumper26]

3

[puddlejumper26]

4

[puddlejumper26]

5

[puddlejumper26]

2.0 整体的步骤

0.1 ng add@ngrx/store - 安装ngrx/store插件 -

0.2 ng add @ngrx/store-devtools- 调试插件

• 在 module.ts 中通过imports进行使用, 可以传入如·maxAge等配置. 我们这里放在 下面创建的 AppStoreModule中

  StoreDevtoolsModule.instrument({
    maxAge: 20,   //最多纪录20条
    logOnly: environment.production      //在生产的环境下生效，开发的环境下需要更多的功能
  })

1.0 首先需要在相关的文件夹下面建立一个 xxx.module.ts 的文件

因为需要进行注册.一般都是 ng g m store 建立一个 store.module.ts . 这个APP中的名字是 index.ts 但是导出的module名字是 AppStoreModule

2.0 然后在平行的位置建立actions,reducers,selectors的文件夹，之后放入相关的ts文件

3.0 actions

• 定义动作- 通过createAction来创建

  // 第一个参数是一个标识符，用来语义化这个是在干什么
  // props 用来接收一个对象 是一个 {key:values}的对象  key 是string， values 是 any，根据情况设定， 后面有()，是调用
  export const SetPlaying = createAction('[player] Set playing', props<{ playing: boolean}>());

4.0 reducers 是用来执行 actions中的动作

• 定义一些原数据类型
• 初始的状态
• 创建createReducer方法

• 导出createReducer

  
  const reducer = createReducer(initialState, on(动作一),on(动作二), .....);  // on执行一系列在actions中定义的动作
  //执行 SetPlaying 这个动作之后，修改state数据，返回一个新的state状态，这样就不会和引用类型的冲突
  
  on(SetPlaying, (state, {playing}) => ({ ...state, playing})),

//下面的这个会在xxx.module.ts文件中import export function playerReducer(state: PlayState, action: Action){ return reducer(state, action); }

### 5.0  `selectors`
- 拿到 state 里的所有的数据
- 通过`createSelector`方法创建
```ts
// 第二个参数是一个函数，获取playing数据的selector
export const getPlaying = createSelector(selectPlayerStates, (state: PlayState) => state.playing);

6.0 xxx.module.ts

• 注册一下

  imports: [
  // CommonModule,
  //https://next.ngrx.io/guide/store/configuration/runtime-checks#configuring-runtime-checks
  StoreModule.forRoot({ player: playerReducer}, {
    //检测这些操作是否合法
    runtimeChecks: {
      strictStateImmutability: true,
      strictActionImmutability: true,
      strictStateSerializability: true,
      strictActionSerializability: true,
    },
  }),
  ]
  export XXXModule{ }

7.0 在最终的组件中进行使用

• 在最终组件的模块中导入 XXXModule

• 在最终组件中使用 actions或者selectors中的方法，拿到数据

• 在一些组件中使用actions中的setxxx方法来设定

  consturctor(private store$: Store<AppStoreModule>, ){}
  onPlay(){
  this.store$.dispatch(SetPlayList({ playList: trueList}))
  }

  上面这些代码执行之后，reducer中的InitialState的值就发生了变化，这个变化在 Redux插件中可以看到

• 在一些组件中使用selectors中的getxxx方法来拿数据，监听变化

  consturctor(private store$: Store<AppStoreModule>, ){
  appStore$
          .pipe(select(getPlayList))
          .subscribe((list) => this.watchList(list, "playList"));}

8.0 Redux 插件

• chrome中安装，方便查看数据流和状态