我可以在减速机上发送一个动作吗？

作者

是否可以在减速器本身中分派操作？我有一个进度条和一个音频元素。目标是在audio元素中更新时间时更新progressbar。但是我不知道把ontimeupdate事件处理程序放在哪里，也不知道如何在ontimeupdate的回调中调度一个操作来更新progressbar。这是我的密码：

//减速机
常量初始状态={
audioElement:new audioElement（'test.mp3'），
进展：0.0
}
initialState.audioElement.audio.ontimeupdate=（）=&gt；{
console.log（'progress'，initialState.audioElement.currentTime/initialState.audioElement.duration）；
//现在如何发送“设置进度值”？
};
常量音频=（状态=初始状态，操作）=&gt；{
开关（动作类型）{
案例“设置进度值”：
返回Object.assign（{}，state，{progress:action.progress}）；
默认：返回状态；
}
}
导出默认音频；

在减速器完成之前启动另一个调度是反模式的，因为减速器开始时收到的状态将不再是减速器完成时的当前应用程序状态。但是从减速器内安排另一次调度不是一种反模式。事实上，这就是Elm语言所做的，正如您所知，Redux是将Elm架构引入JavaScript的一种尝试

下面是一个中间件，它将属性asyncDispatch添加到您的所有操作中。当您的reducer完成并返回新的应用程序状态时，asyncDispatch将触发store.dispatch，并对其执行任何操作

//此中间件将只添加属性&quot；异步调度&quot；所有行动
const asyncDispatchMiddleware=store=&gt；下一步=&gt；行动=&gt；{
让syncActivityFinished=false；
让actionQueue=[]；
函数flushQueue（）{
actionQueue.forEach（a=&gt；store.dispatch（a））；//刷新队列
actionQueue=[]；
}
函数asyncDispatch（asyncAction）{
actionQueue=actionQueue.concat（[asyncAction]）；
如果（syncActivityFinished）{
flushQueue（）；
}
}
const actionWithAsyncDispatch=
assign（{}，action，{asyncDispatch}）；
const res=下一步（actionWithAsyncDispatch）；
syncActivityFinished=true；
flushQueue（）；
返回res；
};

现在，您的减速器可以执行以下操作：

函数缩减器（状态、操作）{
开关（动作类型）{
案例“提取开始”：
获取（'ww.example.com'）
.then（r=&gt；r.json（））
.then（r=&gt；action.asyncDispatch（{type:&quot；fetch response&quot；，value:r}））
返回状态；
案例“获取响应”：
返回Object.assign（{}，state，{whatever:action.value}）；；
}
}

相关文章：

  1. 使用React路由器以编程方式导航
  2. 您是否可以在不调用setState的情况下强制React组件重新加载？
  3. 未捕获错误：不变冲突：元素类型无效：应为字符串（用于内置组件）或类/函数，但得到：对象
  4. 使用es6类时，React中的“super（）”和“super（props）”有什么区别？

发表评论

© 2026 开发百科-程序代码问答平台 • Built with