24行JavaScript代码实现回来的的方法实例 - 行业资讯 - 肥雀云

回来的是迄今为止创建的最重要的JavaScript库之一,灵感来源于以前的艺术比如通量和榆树,回来的通过引入一个包含三个简单要点的可伸缩体系结构,使得JavaScript函数式编程成为可能。如果你是初次接触回来的,可以考虑先阅读官方文档。

考虑如下这个使用了回家的架构的简单的计数器应用。如果你想跳过的话可以直接查看Github回购。

<强> 1.1状态存储在一棵树中
　　

该应用程序的状态看起来如下:

　　　　　　const initialState={数:0}; 　　　　

<强> 1.2行动声明状态更改
　　

根据回来的规约,我们不直接修改(突变)状态。

　　　　//在回家的应用中不要做如下操作　　状态。数=1; 　　　　

相反,我们创建在应用中用户可能用到的所有行为。

　　　　　　const行动={ 　　增量:{类型:“增量”}, 　　衰减:{类型:“减量”} 　　}; 　　　　

<强> 1.3减速器解释行为并更新状态
　　

在最后一个架构部分我们叫做的降低,其作为一个纯函数,它基于以前的状态和行为返回状态的新副本。

　　<李>如果增量被触发,则增加state.count李　　<李>如果减量被触发,则减少state.count李　　　　　　　　const countReducer=(国家=initialState行动)=比;{ 　　开关(action.type) { 　　案例actions.increment.type: 　　返回{ 　　数:状态。数+ 1 　　}; 　　　　案例actions.decrement.type: 　　返回{ 　　数:状态。数- 1 　　}; 　　　　默认值: 　　返回状态; 　　} 　　}; 　　　　

<强> 1.4目前为止还没有回来的
　　

你注意到了吗?到目前为止我们甚至还没有接触到回家的库,我们仅仅只是创建了一些对象和函数,这就是为什么我称其为“大多是规约”,90%的回来的应用其实并不需要回来的。

要使用这种架构,我们必须要将它放入到一个商店当中,我们将仅仅实现一个函数:createStore。使用方式如下:

　　　　　　从“终极版”进口{createStore} 　　　　常量存储=createStore (countReducer); 　　　　store.subscribe(()=比;{ 　　console.log (store.getState ()); 　　}); 　　　　store.dispatch (actions.increment);//日志{数:1} 　　　　store.dispatch (actions.increment);//日志{数:2} 　　　　store.dispatch (actions.decrement);//日志{数:1}之前　　　　

下面这是我们的初始化样板代码,我们需要一个监听器列表听众和减速器提供的初始化状态。

　　　　　　const createStore=(yourReducer)=比;{ 　　让听众=[]; 　　让现状后=yourReducer(未定义,{}); 　　} 　　　　

无论何时某人订阅了我们的商店,那么他将会被添加到听众数组中。这是非常重要的,因为每次当某人在派发(调度)一个动作(行动)的时候,所有的听众都需要在此次事件循环中被通知到。调用yourReducer函数并传入一个未定义的和一个空对象将会返回一个initialState,这个值也就是我们在调用store.getState()时的返回值。既然说到这里了,我们就来创建这个方法。

<强> 2.1 store.getState()
　　

这个函数用于从商店中返回最新的状态,当用户每次点击一个按钮的时候我们都需要最新的状态来更新我们的视图。

<强> 2.2 store.dispatch()
　　

这个函数使用一个行动作为其入参,并且将这个行动和现状后反馈给yourReducer来获取一个新的状态,并且派遣方法还会通知到每一个订阅了当前储存的监听者。

<强> 2.3 store.subscribe(听众)
　　

这个方法使得你在当商店接收到一个行动的时候能够被通知到,可以在这里调用store.getState()来获取最新的状态并更新UI。