首页
学习
活动
专区
工具
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 到底都做了什么

36230

前端高频react面试题

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

3.3K20
  • 深度剖析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

    74720

    美团前端react面试题汇总

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

    5.1K30

    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初值构建; ?

    86820

    React saga_react获取子组件ref

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

    4.5K30

    高频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

    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.2K30

    一天梳理完react面试高频题

    的单向数据模式,所以props是从父组件传入子组件的数据Redux 异步的请求怎么处理可以 componentDidmount 中直接进⾏请求⽆须借助redux。...但是⼀定规模的项⽬,上述⽅法很难进⾏异步的管理,通常情况下我们会借助redux的异步中间件进⾏异步处理。...redux异步中间件其实有很多,当下主流的异步中间件有两种redux-thunkredux-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-thunkredux-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.7K40

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

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

    3.3K10

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

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

    4.2K20

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

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

    2.8K20

    精读《重新思考 Redux

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

    44820

    像踢球一样玩转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.3K70

    字节前端面试被问到的react问题

    这种机制可以让我们改变数据,实现如异步action ,action 过滤,日志输出,异常报告等功能redux-logger:提供日志输出redux-thunk:处理异步操作redux-promise:...当 ref 属性被用于一个自定义的类组件时,ref 对象将接收该组件已挂载的实例作为他的 current。当在父组件需要访问子组件的 ref 时可使用传递 Refs 或回调 Refs。...,而是应该返回一个新的状态,同时使用纯函数;mobx的状态是可变的,可以直接对其进行修改mobx相对来说比较简单,在其中有很多的抽象,mobx更多的使用面向对象的编程思维;redux会比较复杂,因为其中的函数式编程思想掌握起来不是那么容易...Refs 提供了一种访问render方法创建的 DOM 节点或者 React 元素的方法。典型的数据,props 是父子组件交互的唯一方式,想要修改子组件,需要使用新的pros重新渲染它。...经常被误解的只有类组件才能使用 refs,但是refs也可以通过利用 JS 的闭包与函数组件一起使用

    2.1K20
    领券