首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

有没有办法在redux中存储媒体流对象?使用redux thunk还是什么?

在Redux中存储媒体流对象并不是一个常见的做法,因为Redux主要用于管理应用的状态,而媒体流对象通常是与特定的DOM元素或媒体播放器实例相关联的。然而,如果你确实需要在Redux中存储媒体流对象,可以考虑以下方法:

基础概念

  1. Redux:一个JavaScript库,用于管理应用的状态。
  2. Redux Thunk:一个中间件,允许你在Redux中编写异步逻辑。

相关优势

  • Redux Thunk:允许你在action creators中编写异步逻辑,这对于处理媒体流对象(通常是异步获取的)非常有用。

类型

  • Action Creators:用于创建actions。
  • Reducers:用于处理actions并更新状态。
  • Middleware:用于处理异步逻辑。

应用场景

假设你有一个视频播放器应用,需要在Redux中存储当前播放的视频流对象。

解决方案

  1. 定义Action Types
  2. 定义Action Types
  3. 创建Action Creators
  4. 创建Action Creators
  5. 创建Reducer
  6. 创建Reducer
  7. 使用Redux Thunk处理异步逻辑
  8. 使用Redux Thunk处理异步逻辑
  9. 在组件中使用
  10. 在组件中使用

参考链接

注意事项

  • 性能问题:媒体流对象可能会占用大量内存和带宽,因此在Redux中存储它们可能会导致性能问题。
  • 状态管理:确保你的Redux状态管理逻辑能够正确处理媒体流对象的生命周期。

通过上述方法,你可以在Redux中存储和管理媒体流对象,但请谨慎使用,确保不会引入不必要的复杂性和性能问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

第二十篇:从 Redux 中间件实现原理切入,理解“面向切面编程”

中间件的工作模式 中间件的引入,会为 Redux 工作流带来什么样的改变呢?这里我们以 redux-thunk 为例,从经典的“异步 Action”场景切入,一起看看中间件是如何帮我们解决问题的。...那如果想要在 Redux 中引入异步数据流,该怎么办呢?Redux 官方给出的建议是使用中间件来增强 createStore。...这就不由得让人对 thunk 中间件加持下的 Redux 工作流心生好奇:action 入参必须是一个对象,这一点我们在第 19 讲分析 dispatch 源码时,可是亲眼见过 action 相关的数据格式强校验逻辑的...redux-thunk 的源码其实非常简洁,我第一次接触时还是在 2016 年,这么多年过去了,很多事情都变了,唯一不变的是 redux-thunk,它仍然那么好懂。...因此在 Redux 源码中,compose 函数是作为一个独立文件存在的,它具备较强的工具属性。 我们还是先通过阅读源码,来弄清楚 compose 到底都做了什么。

45630

前端高频react面试题

这个问题就设计到了数据持久化, 主要的实现方式有以下几种:Redux: 将页面的数据存储在redux中,在重新加载页面时,获取Redux中的数据;data.js: 使用webpack构建的项目,可以建一个文件...中,每次进入页面判断sessionStorage中有没有存储的那个值,有,则读取渲染数据;没有,则说明数据是初始化的状态。...但是在⼀定规模的项⽬中,上述⽅法很难进⾏异步流的管理,通常情况下我们会借助redux的异步中间件进⾏异步处理。...redux异步流中间件其实有很多,当下主流的异步中间件有两种redux-thunk、redux-saga。...在当前组件的 props中,包含 location属性对象,包含当前页面路由地址信息,在 match中存储当前路由的参数等数据信息。可以直接通过 this .props使用它们。

3.4K20
  • 深度剖析github上15.1k Star项目:redux-thunk

    作为一名React方向的前端工程师,不管是被面试还是面试别人,大部分都会说起redux-thunk的实现原理,因为它非常经典且有用,而且代码量少的感人,只有短短12行代码,却能解决React开发中同一个函数支持多...Actions.start()即可,我们也知道action返回的是一个标准的对象,但我们可以在return之前做一些side effect。...到这一步我们仍然不能直接进入redux-thunk的源码分析,因为我们还是不清楚如何解决上述步骤,因为我们还没有了解redux的中间件机制。...redux中间件机制 说到中间件(middleware),使用过nodejs的人可能会很熟悉,比如说知名的koa中间件,express中间件等,其实中间件笔者的理解是在某个执行流中的某个环节做一些额外的处理的模块...实现中间件的机制也很简单, 就是在框架核心执行流中去遍历外部传入的中间件,并依次执行即可,我们先来看看redux中如何使用中间件的: import { createStore, applyMiddleware

    75720

    美团前端react面试题汇总

    但是在⼀定规模的项⽬中,上述⽅法很难进⾏异步流的管理,通常情况下我们会借助redux的异步中间件进⾏异步处理。...redux异步流中间件其实有很多,当下主流的异步中间件有两种redux-thunk、redux-saga。...mapStateToProps(state,ownProps)中带有两个参数,含义是∶state-store管理的全局状态对象,所有都组件状态数据都存储在该对象中。...什么是装饰者模式:在不改变对象自身的前提下在程序运行期间动态的给对象添加一些额外的属性或行为可以提高代码的复用性和灵活性。...但是在已经使用redux来管理和存储全局数据的基础上,再去使用localStorage来读写数据,这样不仅是工作量巨大,还容易出错。那么有没有结合redux来达到持久数据存储功能的框架呢?

    5.1K30

    高频React面试题及详解

    为什么选择使用框架而不是原生? 框架的好处: 组件化: 其中以 React 的组件化最为彻底,甚至可以到函数级别的原子组件,高度的组件化可以是我们的工程易于维护、易于组合拓展。...但是在一定规模的项目中,上述方法很难进行异步流的管理,通常情况下我们会借助redux的异步中间件进行异步处理. redux异步流中间件其实有很多,但是当下主流的异步中间件只有两种redux-thunk、...redux-thunk优点: 体积小: redux-thunk的实现方式很简单,只有不到20行代码 使用简单: redux-thunk没有引入像redux-saga或者redux-observable额外的范式...分支覆盖等等 redux-saga缺陷: 额外的学习成本: redux-saga不仅在使用难以理解的 generator function,而且有数十个API,学习成本远超redux-thunk,最重要的是你的额外学习成本是只服务于这个库的...缺陷: 学习成本奇高: 如果你不会rxjs,则需要额外学习两个复杂的库 社区一般: redux-observable的下载量只有redux-saga的1/5,社区也不够活跃,在复杂异步流中间件这个层面redux-saga

    2.4K40

    React:Redux源码分析

    Web应用越来越复杂,需要管理的应用状态越来越多; 应用的状态在什么时候,由于什么原因,如何变化已然不受控制; 我们总是将两个难以理清的概念混淆在一起:变化和异步; ? Redux核心概念?...Store:保存应用程序State数据的地方; Action:JS普通对象,用于描述一个事件以及必要参数,是改变 State 的唯一办法; Reducer:纯函数,用于根据Action完成 State...还是盗的图 ? OK,进入正题…. ? ---- 本文分析的源码是 目前Redux的最新发布版本 4.0.0 (网上那些多数是3.x版本 ? ) ?...注:在index.js中统一导出分散在各目录中的子模块,这样使用者无论需要用到什么模块,只需从统一的位置import,无需记忆各子模块的实际位置;值得借鉴; 2. utils/isPlainObject.js...4.3. utils/actionTypes.js: 定义了2个Redux内部使用的Action常量,用于在Redux初始化或替换Reducer时完成Store初值构建; ?

    88320

    React saga_react获取子组件ref

    ---- 最近将项目中redux的中间件,从redux-thunk替换成了redux-saga,做个笔记总结一下redux-saga的使用心得,阅读本文需要了解什么是redux,redux中间件的用处是什么...如果存在副作用函数,那么我们需要首先处理副作用函数,然后生成原始的js对象。如何处理副作用操作,在redux中选择在发出action,到reducer处理函数之间使用中间件处理副作用。...(2)redux-thunk 在redux中,thunk是redux作者给出的中间件,实现极为简单,10多行代码: function createThunkMiddleware(extraArgument...(3)redux-thunk的缺点 hunk的缺点也是很明显的,thunk仅仅做了执行这个函数,并不在乎函数主体内是什么,也就是说thunk使 得redux可以接受函数作为action,但是函数的内部可以多种多样...(plain object) 对比redux-thunk我们发现,redux-saga中监听到了原始js对象action,并不会马上执行副作用操作,会先通过Effect方法将其转化成一个描述对象,然后再将描述对象

    4.5K30

    Redux原理分析以及使用详解(TS && JS)

    某个组件的状态,需要共享 某个状态需要在任何地方都可以拿到 一个组件需要改变全局状态 一个组件需要改变另一个组件的状态 1.2、为什么要用Redux 在React中,数据在组件中是单向流动的,这是react...react中,也可以使用中在Vue中,当然也适用其他的框架。...换言之,中间件都是对store.dispatch()的增强 四、redux的异步流 在多种中间件中,处理 redux 异步事件的中间件,绝对占有举足轻重的地位。...尽管redux-thunk很简单,而且也很实用,但人总是有追求的,都追求着使用更加优雅的方法来实现redux异步流的控制,这就有了redux- promise。...redux-saga将react中的同步操作与异步操作区分开来,以便于后期的管理与维护 ,redux- saga相当于在Redux原有数据流中多了一层,通过对Action进行监听,从而捕获到监听的Action

    4.5K30

    一天梳理完react面试高频题

    的单向数据流模式,所以props是从父组件传入子组件的数据Redux 中异步的请求怎么处理可以在 componentDidmount 中直接进⾏请求⽆须借助redux。...但是在⼀定规模的项⽬中,上述⽅法很难进⾏异步流的管理,通常情况下我们会借助redux的异步中间件进⾏异步处理。...redux异步流中间件其实有很多,当下主流的异步中间件有两种redux-thunk、redux-saga。...(1)使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk的实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊像redux-saga或者...redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js 中,不再是掺杂在 action.js 或 component.js 中action摆脱thunk

    4.1K20

    一天梳理完react面试题

    但是在⼀定规模的项⽬中,上述⽅法很难进⾏异步流的管理,通常情况下我们会借助redux的异步中间件进⾏异步处理。...redux异步流中间件其实有很多,当下主流的异步中间件有两种redux-thunk、redux-saga。...(1)使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk的实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊像redux-saga或者...redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js 中,不再是掺杂在 action.js 或 component.js 中action摆脱thunk...但是在已经使用redux来管理和存储全局数据的基础上,再去使用localStorage来读写数据,这样不仅是工作量巨大,还容易出错。那么有没有结合redux来达到持久数据存储功能的框架呢?

    5.5K30

    单向数据流-从共享状态管理:fluxreduxvuex漫谈异步数据处理

    不管是Vue,还是 React,都需要管理状态(state),比如组件之间都有共享状态的需要。 什么是共享状态?...redux Redux使用一个对象存储整个应用的状态(global state),当global state发生变化时,状态从树形结构的最顶端往下传递。每一级都会去进行状态比较,从而达到更新。...reducer 不存储 state, reducer 函数逻辑中不应该直接改变 state 对象, 而是返回新的 state 对象(可以考虑使用 immutable-js)。...Vuex数据流的顺序是: View调用store.commit提交对应的请求到Store中对应的mutation函数->store改变(vue检测到数据变化自动渲染) redux 推荐使用 Object.assign...这样看来我认为VUE是更推荐在使用了VUEX的框架中的每个组件内部都使用store,而React-Redux则提供了自由选择性。

    3.8K40

    精读《重新思考 Redux》

    相比之下,还是面向对象的方式更好理解,毕竟 store 是一个对象。...支持动态数据还是挺费劲的,需要理解高阶函数,理解中间件的使用方式,否则你不会知道为什么这样写是对的: const incrementAsync = count => async dispatch =>...经过长期实践,组件最好不要使用数据流,项目的数据流只用一个实例完全够用了,全局 dispatch 的设计其实更合理,而注入 dispatch 的设计看似追求技术极致,但忽略了业务使用场景,导致画蛇添足,...同时 redux 建议使用 payload key 来传值,那为什么不强制使用 payload 作为入参,而要通过 action.payload 取值呢?...; 其次使用 async 在 effects 函数中,使用 this.increment 函数调用方式,取代 put({type: "increment"})(dva),在 typescript 中拥有了类型支持

    45720

    redux(应用的状态管理器)有那么难吗?没有!

    Redux是什么? Redux其实很简单,总结起来就三句话: ✦ 将整个应用的state储存在唯一的store对象中。...✦ action是什么鬼? ✦ reducer是什么鬼? ✦ 最重要的是,为啥要使用Redux,它能给我们带什么什么好处?或者说,引入这么一个状态理器到底有啥用? 接下来,我们先捉这三只鬼。...为了让dispatch方法可以接受函数作为参数,我们需要使用redux-thunk这个中间件。...那么,回到最初的话题,引入Redux到我们的应用中,到底有什么好处?我们为什么需要一个专门的状态管理器? 为啥要使用redux? 早些时候,前端并没有这么复杂,几乎不怎么涉及数据管理。...而引入redux之后,我们单纯的面向数据编程即可,我们在Redux中统一的管理数据,然后数据变换会反映到view上,而数据上的交互,本质上也是触发了Redux中的action。

    3.4K10

    Redux异步解决方案之Redux-Thunk原理及源码解析

    在继续深入源码前,我们先来思考一个问题,为什么我们要用Redux-Thunk,不用它行不行?...Redux-Thunk前我们dispatch的action必须是一个纯对象(plain object),使用了Redux-Thunk后,dispatch可以支持函数,这个函数会传入dispatch本身作为参数...(increment()); }, 1000); 这样写同样可以在1秒后发出增加的action,而且代码还更简单,那我们为什么还要用Redux-Thunk呢,他存在的意义是什么呢?...这就是为什么你可以在thunk中返回一个Promise并且等他完成: dispatch(someThunkReturningPromise()).then(...)...在一些更复杂的应用中,你可能会发现你的异步控制流程通过thunk很难表达。比如,重试失败的请求,使用token进行重新授权认证,或者在一步一步的引导流程中,使用这种方式可能会很繁琐,而且容易出错。

    3.6K51

    【React】211- 2019 React Redux 完全指南

    Redux 是 React 的附加项。 即使你打算同时使用它们,我还是强烈建议先脱离 Redux 学习纯粹的 React。...第一课 Redux 的好处 如果你稍微使用过一段时间的 React,你可能就了解了 props 和单向数据流。数据通过 props 在组件树间向下传递。就像这个组件一样: ?...什么是 Redux Action? 在 Redux 中,具有 type 属性的普通对象就被称为 action。...我整理了一个如何在 Redux 里做 Immutable 更新完全指南,包含更新 state 中对象和数组的七个通用模式。 安装 Immer 在 reducers 里面使用也是一种很好的方式。...这是另一层的抽象,如果你不想在你的应用里面使用,那也没关系。 不过我还是会解释下它们是什么。然后你可以决定你是否有时/总是/绝不想使用它们。

    4.3K20

    前端二面高频react面试题集锦_2023-02-23

    在输出的时候,是输出 Web DOM,还是 Android 控件,还是 iOS 控件,就由平台本身决定了。所以,react很方便和其他平台集成 React的事件和普通的HTML事件有什么不同?...使用箭头函数(arrow functions)的优点是什么 作用域安全:在箭头函数之前,每一个新创建的函数都有定义自身的 this 值(在构造函数中是新对象;在严格模式下,函数调用中的 this 是未定义的...但是在⼀定规模的项⽬中,上述⽅法很难进⾏异步流的管理,通常情况下我们会借助redux的异步中间件进⾏异步处理。...redux异步流中间件其实有很多,当下主流的异步中间件有两种redux-thunk、redux-saga。...redux-saga中间件 redux-saga优点: 异步解耦: 异步操作被被转移到单独 saga.js 中,不再是掺杂在 action.js 或 component.js 中 action摆脱thunk

    2.8K20

    像踢球一样玩转Redux和React

    1.Redux 应用管理服务 在了解是什么是Redux之前,可能需要先知道什么是Flux。Flux是Facebook用来构建用户端的web应用的应用程序体系架构。...reducer不存储state,也不直接改变state对象,而是返回新的state对象。...3) 只有一个store(树形结构),state 以单一对象存储在 store 对象中, 它是只读的,只能使用函数reducer对其进行更新(其实是返回新的state对象)。 2....Redux对比Reflux 在众多的关于Flux思想的类库中,Reflux 也是一个比较好的框架,它使用起来甚至比Redux更简单。它的单向数据流模式主要由actions和stores组成。 ?...返回修改的store 组件获取数据 将state合并到组件的props中 直接修改组件的state 为什么会使用Redux,而不选择Reflux呢?

    1.4K70
    领券