岩芯数据中的沉闷

古腾堡11.6添加了对的支持砰的一声。您可以将thunks视为可以调度的函数:

//actions.js操作export const myThunkAction=()=>({select,dispatch})=>{return“我是一个笨蛋!我可以被分派,使用选择器,甚至分派其他动作。”;};

为什么笨蛋有用?

Thunks公司扩展Redux操作的含义。在thunks之前,操作完全是功能性的,只能返回和生成数据。常见用例,如与存储交互或使用单独的控制。您经常会看到这样的代码:

导出函数*saveRecordAction(id){const record=产量控制.select('current-store','getRecord',id);产量{type:'BEFORE_SAVE',id,record};const结果=生成控件.fetch({url:'https://。。。',方法:'POST',数据:record});产量{type:'AFTER_SAVE',id,结果};回报结果;}常量控件={选择://。。。,获取://。。。,};

存储操作和获取函数等副作用将在操作之外实现。Thunks为这种方法提供了一种替代方法。它们允许您内联使用副作用,如下所示:

export const saveRecordAction=(id)=>async({select,dispatch})=>{const record=select('current-store','getRecord',id);调度({type:'BEFORE_SAVE',id,record});const响应=等待获取({url:'https://。。。',方法:'POST',数据:记录});const results=等待响应.json();分派({type:'AFTER_SAVE',id,results});回报结果;}

这样就无需实施单独的控制。

笨蛋可以接触商店帮手

让我们看一个古腾堡核的例子。在砰砰作响之前切换功能来自的操作@wordpress/界面包的实现方式如下:

export函数*toggleFeature(scope,featureName){const currentValue=产量控制选择(接口StoreName,“功能激活”,范围,功能名称);产量控制.调度(接口StoreName,“setFeatureValue”,范围,功能名称,! 当前值);}

控制是实现派遣行动和选择存储中的数据。

有了重击声,就有了一条更干净的路。这就是如何切换功能现已实施:

导出函数toggleFeature(scope,featureName){返回函数({select,dispatch}){const currentValue=select.isFeatureActive(scope,featureName);dispatch.setFeatureValue(作用域,featureName,!currentValue);};}

多亏了选择派遣参数,thunks可以直接使用存储,而不需要生成器和控件。

Thunks可以是异步的

想象一下,一个简单的React应用程序可以让你在恒温器上设置温度。它只有一个输入和一个按钮。单击按钮可发送将温度保存到API使用输入的值执行操作。

如果我们使用控件保存温度,则存储定义如下所示:

const store=wp.data.createReduxStore('my-store'{操作:{将温度保存到API:函数*(温度){const结果=产量{type:“FETCH_JSON”,url:“https://。。。',方法:'POST',数据:{温度}};返回结果;}},控件:{异步FETCH_JSON(操作){const响应=等待window.fetch(action.url{方法:action.method,正文:JSON.stringify(action.data),} );return-response.json();}},//减速机、选择器。。。} );

虽然代码相当简单,但存在一定程度的间接性。这个将温度保存到API操作不直接与API对话,但必须通过FETCH_JSON控件。

让我们看看如何使用thunks删除此间接寻址:

const store=wp.data.createReduxStore('my-store'{操作:{将温度保存到API:(温度)=>异步()=>{const响应=等待window.fetch('https://。。。', {方法:'POST',正文:JSON.stringify({temperature}),} );return await response.json();}},//减速机、选择器。。。} );

那太酷了!更好的是还支持解析器:

const store=wp.data.createReduxStore('my-store'{// ...选择器:{获取温度:(state)=>state.temperature},解析器:{getTemperature:()=>async({dispatch})=>{const response=等待窗口.fetch('https://。。。' );const result=等待响应.json();调度接收电流温度(结果温度);}},// ...} );

默认情况下,每个数据存储中都包含对thunks的支持,就像对
发电机和控制器。

Thunks API公司

thunk接收带有以下键的单个对象参数:

选择

包含预先绑定到状态的商店选择器的对象,这意味着您不需要提供状态,只需要提供附加参数。选择触发相关的解析器(如果有),但不等待它们完成。它只返回当前值,即使它为空。

如果选择器是公共API的一部分,那么它可以作为select对象上的方法使用:

constthunk=()=>({select})=>{//select是商店选择器的对象,预先绑定到当前状态:const temperature=select.getTemperature();}

由于并非所有选择器都显示在商店中,选择双重用作支持将选择器作为参数传递的函数:

constthunk=()=>({select})=>{//select支持私有选择器:const doubleTemperature=选择((温度)=>温度*2);}

解决选择

解决选择与相同选择,除非它返回一个使用相关解析器提供的值进行解析的承诺。

const thunk=()=>({resolveSelect})=>{const temperature=等待resolveSelect.getTemperature();}

派遣

包含存储操作的对象

如果操作是公共API的一部分,则可以在派遣对象:

constthunk=()=>({dispatch})=>{//分派是商店操作的对象:const temperature=等待dispatch.retrieveTemperature();}

由于并非所有操作都在商店中公开,派遣双重用作支持将Redux操作作为参数传递的函数:

constthunk=()=>async({dispatch})=>{//dispatch也是一个接受内联操作的函数:调度({type:'SET_TEMPERATURE',TEMPERATURE:result.value});//重击可以与动作互换调度(updateTemperature(100));//Thunks也可能是异步的。如果是,dispatch会返回一个承诺等待分派(()=>window.fetch(/*…*/));}

注册表

注册表通过其派遣,选择、和解决选择方法。
这些与上面描述的非常相似,只是稍微有些扭曲。打电话registry.select(storeName)返回返回选择器对象的函数商店名称。当你需要与其他商店互动时,这很方便。例如:

constthunk=()=>({registry})=>{const error=registry.select('core').getLastEntitySaveError('root','menu',menuId);/* ... */}