本文正在参加「金石计划 . 瓜分6万现金大奖」 ”

• ngRx用来干什么？

  • 进行全局状态管理。

ngRx的原理是什么？

• 所有的状态都被存储在Store中，store当中的数据只能通过reducer去更改。

• 若组件想修改Store的数据，需要先触发对应的action，触发的action会被reducer接收到，在reduce中根据不同的action类型去对状态进行不同的处理。将处理完的状态返回给store存储好。

• Selector用来获取Store的数据。复杂的取数据的代码都写到了Selector里，component里只需要写从Selector里拿对应数据的代码就好了。

• 若涉及异步操作需要用到EFFECTS：

  • 若异步操作需要向服务器发送请求，将发送请求的代码先写入到service中，由effects去调用service，然后service再向服务器端发送请求。服务器先返回结果到service，然后effects再从service中获取响应数据。当获取到异步结果后，在effects中去触发action，通过触发此action将结果给到reducer。让reducer处理此结果，并存储到store。

用ngRx前需要安装啥？

ngRx的功能由几个模块分管，需按照自己的需求去安装对应模块

• Redux Devtools 可以让你在浏览器上清楚看到通过Action传过来的数据具体是怎样的

  你可以看到传来的值里有个player，这就是我们在注册reducer时给对应的reducer文件所设置的名字。

  

如何实际使用ngRx

定义阶段

• 定义Action

export const SetCurrentIndex = createAction('[player] Set CurrentIndex', props<{ currentIndex: number }>());

• 定义reducer

• 

• 定义selector

• 注册reducer

使用阶段

• 使用Action修改值

  这里的逻辑就是先调用service接口获取对应数据，然后通过dispatch来进行广播，广播的内容就是之前定义的Action，并把接口返回数据中对应的数据传给Action。它进行的广播，自然就会被定义reducer 阶段的on()给监听到，进而用你所给的数据修改当前Store

  

• 使用Selector获取值