当前位置: 首页 > Web前端 > HTML5

AngularNgrxStore中State和Reducer之间的绑定关系是如何实现的

时间:2023-04-05 00:50:21 HTML5

NgRXStore将状态建模为Store内的单个简单JavaScript对象。状态是不可变的或只读的。这意味着没有直接的StoreAPI来更改Store中的状态对象。这个状态对象的一个??例子可以表示为:conststate={developer:[]};Store存储许多应用程序状态切片,称为State.Actions为了更新Store中的状态,应用程序需要调度一个Action。reducer,也称为纯函数,捕获此操作,对状态执行更新,并返回一个新的修改后的不可变状态对象。一个动作的例子:constaction={type:'ADD_DEVELOPER',payload:{name:'Bilal',competence:['ASP.NET','Angular']}};上面的类型属性描述了操作的意图。在这种情况下,类型属性是ADD_DEVELOPER,这意味着正在分派操作以添加存储在操作的有效负载属性中的新Developer对象。有效负载只是与reducer添加到返回给Store订阅者的新状态的操作类型相关的数据。Reducer或ActionReducer就状态管理库而言,ActionReducer或Reducer是一个纯函数。Reducers响应动作并返回一个新的状态对象,该对象包含状态内的所有更改,因此具有状态的不可变特性。reducer分析分派的操作,读取操作的有效负载,对Store内的状态执行适当的操作,并返回一个包含所有更改的全新状态对象。Reducer的一个例子:functionreducer(state:State,action:Action){constactionType=action.type;constdeveloper=action.payload;switch(actionType){case'ADD_DEVELOPER':{constdevelopers=[...state.developers,developer];return{developers}}...}}在ngrx/store模块的设置过程中,我们使用应用程序中所有可用状态段与其对应的reducer之间的映射来配置StoreModule类。换句话说,当Store想要更新特定的状态切片时,这就是我们告诉Store使用指定的reducer的方式。上述代码的语义是告诉Store,当它需要更新SITE_CONTEXT_FEATURE所代表的ApplicationState时,请使用reducerToken所代表的Reducer纯函数来进行更新。