有没有办法在redux中存储媒体流对象？使用redux thunk还是什么？
在Redux中存储媒体流对象并不是一个常见的做法，因为Redux主要用于管理应用的状态，而媒体流对象通常是与特定的DOM元素或媒体播放器实例相关联的。然而，如果你确实需要在Redux中存储媒体流对象，可以考虑以下方法：
基础概念
- Redux：一个JavaScript库，用于管理应用的状态。
- Redux Thunk：一个中间件，允许你在Redux中编写异步逻辑。
相关优势
- Redux Thunk：允许你在action creators中编写异步逻辑，这对于处理媒体流对象（通常是异步获取的）非常有用。
类型
- Action Creators：用于创建actions。
- Reducers：用于处理actions并更新状态。
- Middleware：用于处理异步逻辑。
应用场景
假设你有一个视频播放器应用，需要在Redux中存储当前播放的视频流对象。
解决方案
- 定义Action Types：
- 定义Action Types：
- 创建Action Creators：
- 创建Action Creators：
- 创建Reducer：
- 创建Reducer：
- 使用Redux Thunk处理异步逻辑：
- 使用Redux Thunk处理异步逻辑：
- 在组件中使用：
- 在组件中使用：
参考链接
注意事项
- 性能问题：媒体流对象可能会占用大量内存和带宽，因此在Redux中存储它们可能会导致性能问题。
- 状态管理：确保你的Redux状态管理逻辑能够正确处理媒体流对象的生命周期。
通过上述方法，你可以在Redux中存储和管理媒体流对象，但请谨慎使用，确保不会引入不必要的复杂性和性能问题。
相关·内容
我已经看过很多例子来了解Redux是如何工作的，而且大多数时候商店都是以不同的方式配置的。我想是旧的还是新的，但我有点迷茫了。这是我确定的三种模式。如果有人能解释他们之间的区别：
简单的方法：
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk'
import createLogger from 'redux-logger'
const loggerMiddleware = createLogger(
浏览 1提问于2016-08-16得票数 0
回答已采纳
我正在将loadInstruments thunk重构为redux-observable epic，因为它做了越来越多的异步操作，加上我需要取消操作等(教程中的典型维基搜索场景)。
这就是我的组件如何使用这个thunk (它是通过mapDispatchToProps提供的)
this.props.loadInstruments(queryParams).then(...)
Thunk做了很多事情，其中之一就是AJAX调用。它返回了一个承诺，我可以等待，然后看看AJAX调用的结果(这个结果也被放到redux store中)。
然而，在重构到redux-observable和epic之后，我没有办
浏览 7提问于2018-08-16得票数 1
我正在实现“添加最爱”，并将其存储在异步存储Vs redux中。它在添加和切换后，从家庭标签到最喜欢的标签很好。但是在杀死应用程序后，我得到了"date.toDate不是一个函数“的错误，然后转到了最喜欢的选项卡。
有什么建议和解决办法吗？非常感谢!
组件
<CardInfo
key={data.id.toString()}
promotionToDate={moment(data.expireDate.toDate()).format('lll')}
/>
Action
export const getPro
浏览 4提问于2022-02-26得票数 0
回答已采纳
我使用测试我的redux操作。然而，我想测试我的行为和他们正在被设置的商店。我的代码是这样的：
import configureStore from 'redux-mock-store'
import thunk from 'redux-thunk'
const mockStore = configureStore([thunk])
const store = mockStore({ ...state })
console.log(store.getState()) // => { ...state }
store.dispatch(someAction(
浏览 0提问于2018-03-13得票数 0
我想对redux异步操作使用redux-thunk，但是redux返回错误：“操作必须是普通对象。使用自定义中间件进行异步操作。”
我不是在使用webpack，而是将所有js文件连接到一个文件中。我知道我的问题可能是由这个引起的，但现在我需要在没有webpack的情况下解决，如果可能的话。
这里是存储定义
const pricingStore = Redux.createStore(
pricingReducer,
Redux.applyMiddleware(window.ReduxThunk.default)
// using UMD redux-thunk from
浏览 2提问于2017-04-06得票数 1
我一直在尝试用我的react redux项目来实现redux-persist。这就是我所拥有的。
store.js：
import {compose, createStore, applyMiddleware} from 'redux';
import {persistStore, autoRehydrate} from 'redux-persist';
import {combineReducers} from 'redux';
import thunk from 'redux-thunk';
import reducer f
浏览 1提问于2017-10-06得票数 0
1回答
只有当本地服务器启动时，我才想将redux devTools添加到商店中。因为这是一个异步操作，所以我最终得到了一个“不完整”的存储。
检查服务器是否存在的异步函数：
export async function isReduxDevServerAlive(url,port, secure = false) {
const server = secure ? 'https' : 'http' + `://${url}:${port}`;
try {
let response = await fetch(server);
return true;
}
浏览 1提问于2016-07-13得票数 0
1回答
看起来，thunk和saga是两种类型的中间件，可以在Redux中实现副作用和异步操作。基于一些基本的谷歌搜索，看起来雷鸣和传奇基本上是为了同样的目的。在不了解这两种中间件之间的关键区别的情况下，基于一些基本的谷歌搜索，我得到的印象是，从历史上看，thunk通常是中小型应用程序的首选，而saga则是大型应用程序的首选。
然而，Redux已经将thunk作为其片实现的默认中间件。所以看起来开发团队已经决定，thunk是一个比saga更好的选择。我是否正确地推断了这个理由？您能想到这样一种情况:对于Redux实现来说，saga是一个比thunk更好的选择(除了基于开发人员对saga的体验水平的偏见
浏览 9提问于2022-10-28得票数 -2
回答已采纳
1回答
没有redux- thunk，你的动作创建者仍然可以将调度作为参数，似乎可以做任何thunk会做的事情：
那么redux-thunk的动机到底是什么呢？
浏览 0提问于2018-04-08得票数 0
2回答
这是redux-thunk库的源代码：
function createThunkMiddleware(extraArgument) {
return ({ dispatch, getState }) => next => action => {
if (typeof action === 'function') {
return action(dispatch, getState, extraArgument);
}
return next(action);
};
}
const thunk = createTh
浏览 3提问于2020-02-09得票数 1
回答已采纳
1回答
我正在使用navigator.mediaDevices.getUserMedia(mediaConstraints)和Redux，但我找不到一种方法来停止媒体流。 我已经尝试在reducer和action中停止媒体流 在reducer中，我尝试过 case actionTypes.GET_USER_MEDIA_CLOSE:
return {
...state,
stream: {
...state.stream,
active: false
}
}; 同样在reducer中，
浏览 11提问于2019-08-31得票数 1
Redux Thunk和Redux Saga都是Redux的中间件。两者之间的区别是什么，以及如何确定何时使用Redux Thunk或Redux Saga？
浏览 1提问于2018-05-11得票数 26
2回答
我正尝试在使用thunk中间件和可选中间件记录器(redux-logger)的redux存储上配置分派类型。 这正确地推断出商店的dispatch上的thunk类型... import { createStore, applyMiddleware } from 'redux';
import thunk, { ThunkMiddleware } from 'redux-thunk';
// ...
const preloadedState = undefined;
export const store = createStore(rootReducer,
浏览 61提问于2021-11-07得票数 1
回答已采纳
我对这个redux.developed非常陌生，这是一个不断变化的项目，现在我想升级它，.I使用了很多API调用来获取数据，并使用存储来获取和检索数据。有没有人能建议我在一些博客中使用正确的MobX，不管是thunk还是saga。
浏览 3提问于2018-09-06得票数 0
回答已采纳
1回答
我正试图用我认为是纯redux的方式来实现一个应用程序。将数据从存储库中取出，而不是通过道具。
在下面的示例中，我不需要将道具传递给List组件。它使用list从商店中提取connect。但是，我看不出有任何方法可以不使用道具将element从list中提取到Element组件中。有没有办法做到这一点而不让它通过道具？
import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import {createStore} from 'redux'
import
浏览 1提问于2018-07-07得票数 0
回答已采纳
我想将对象添加到Redux中存在的数组中。如果我不添加redux-persist，代码就可以正常工作，但是在添加redux-persist之后，我得到了一个状态不可迭代的TypeError。我想用redux-persist来运行代码。有没有办法做到这一点？ 我的Store代码在添加redux-persist之前： import rootReducer from './reducer';
import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk&#
浏览 32提问于2020-11-28得票数 0
4回答
我对使用redux和react还是个新手。我试着用redux做一个简单的API调用，并让它在react中渲染。我可以看到API调用在redux dev工具的有效负载中工作，但我似乎无法让它更新可能在` `connect?中的状态。
actions/index
import FilmAPI from '../api/api';
export const FETCH_FILMS = 'FETCH_FILMS';
export const RECEIVE_FILMS = 'RECEIVE_FILMS';
export const receiveFi
浏览 0提问于2018-02-20得票数 1
我使用redux-loop从我的reducers中调用动作创建器。这通常工作得很好。
然而，我也在为我的一些动作创建者使用thunk。如果我使用常规的action creator并将其转换为thunk，那么它在redux-loop中将不再可用。
有没有办法在reducers中调用redux-loop中的thunks？
浏览 3提问于2016-06-17得票数 3
1回答
我使用Redux作为我的react应用程序，我觉得Thunk的工作方式令人印象深刻。例如：
export const doubleAsync = () => {
// Thunk will automatically inject "dispatch" object here
return (dispatch, getState) => {
return new Promise((resolve) => {
setTimeout(() => {
dispatch({
type : CO
浏览 1提问于2017-05-14得票数 0
回答已采纳
我在读Redux我有点困惑于createAsyncThunk
createAsyncThunk 是雷击和createAsyncThunk完全不同的东西是否取代了Thunk?
浏览 19提问于2022-02-16得票数 0
这些configureStore函数和initialState参数之间有什么区别？
import { createStore, applyMiddleware } from 'redux';
import logger from 'redux-logger';
import thunk from 'redux-thunk';
import rootReducer from '../reduc
浏览 4提问于2017-08-04得票数 0
回答已采纳
假设这是我的推送： const thunk = async (dispatch,getState) =>{ 'some dispatch and await code'} 因此，当我想发送此消息时，我应该使用await dispatch(thunk)还是只使用dispatch(thunk) 从Redux-thunk和Redux的源代码来看，我认为我应该使用await dispatch(thunk)作为redux-thunk不会为我添加‘等待’。但是如果我不使用await会发生什么呢(它只是返回一个未决的承诺)，里面的代码会不会被thunk (来自Api的调度和拉取等)还
浏览 24提问于2021-07-17得票数 0
回答已采纳
handleDeleteClick = propertyName => () => {
this.props.clearFilterOption(propertyName, this.props.filtersPropertyName);
this.props.onFilterClear();
}; handleDeleteClick函数是一个按钮处理程序。我的第一个redux操作clearFilterOption修改了存储。第二个动作onFilterClear是从redux-thunk的getState映射过滤器参数并调用api的异步动作。我的问题是- redux th
浏览 7提问于2019-05-29得票数 1
回答已采纳
我不能在文件Store.js中使用本地存储。
此错误发生在生成页面时。任何控制台日志都将显示在终端窗口中。
在Store.js中
import { createStore, combineReducers, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";
import {
productDetailsReducer,
product
浏览 18提问于2022-09-29得票数 0
所以redux thunk给了我这个错误(或者不是redux-thunk而是扩展)。
The previous state received by the reducer has unexpected type of "Function".
Expected argument to be an object with the following keys: "register"
商店
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux
浏览 2提问于2017-02-08得票数 1
回答已采纳
我正在使用react-native和redux-persist，我似乎无法让我的存储持久存储到异步存储中。根据redux-persist repo，这可能与AsyncStorage从react-native中删除有关，但我似乎不知道需要做些什么来解决这个问题。
当我的应用程序启动时，我在redux devtools中看到persist/PERSIST和persist/REHYDRATE操作触发，但没有任何内容存储在异步存储中。
我以为我已经将我的文件设置为redux-persist文档的解释，但我想我遗漏了什么。我对Redux还是个新手，所以我可能会对一些基本的东西感到困惑。
我的Redux.
浏览 2提问于2019-07-17得票数 0
1回答
我的程序一直运行得很好，直到我开始使用“react redux”。现在，我在localhost上得到了一个空白页，控制台显示了错误：
这是我的代码：
商店
import {createStore, applyMiddleware, compose} from 'redux'
import thunk from 'redux-thunk';
import rootReducer from './reducers/rootReducer';
import {sessionService} from '
浏览 9提问于2022-03-13得票数 0
回答已采纳
4回答
有没有办法禁止在一个页面上滚动？我尝试在特定页面上设置overflow: hidden，但没有成功。我必须在index.css的body上设置它，才能使它工作，但这显然会禁用所有页面上的滚动。因此，我想到的唯一方法就是在body上有条件地设置CSS类。有没有办法根据redux存储中的值在index.js中有条件地设置CSS类，或者有没有其他方法？ 我的index.js import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'rea
浏览 45提问于2020-07-22得票数 5
回答已采纳
Types.js文件：
const ADD_TOKENS = "ADD_TOKENS";
export { ADD_TOKENS};
Actions.js文件：
import { ADD_TOKENS } from "./types";
function addTokens() {
return {
type: ADD_TOKENS,
};
}
const actionCreators = {
addTokens,
};
export { actionCreators };
Reducers.js文件
import { ADD_TOK
浏览 0提问于2020-05-31得票数 0
全部：
我是Redux的新手，当我尝试遵循有关异步操作的教程时
有一个叫thunk的概念，我不太明白为什么我们需要thunk来做异步操作，为什么我们不能简单地发送init信号，然后在fetch data的promise中发送finish信号？
function fetchDataAction(dispatch){
dispatch({
type: "START"
})
fetch("DATA_URL")
.then(function(res){return res.json();})
.th
浏览 0提问于2016-06-17得票数 2
我的项目出错了。我也没找到解决问题的办法。
这是错误消息：
The previous state received by the reducer has unexpected type of "Function". Expected argument to be an object with the following keys: "posts", "sidebar"
代码：
store.js：
import { createStore, applyMiddleware } from 'redux'
import logger
浏览 6提问于2016-05-13得票数 2
回答已采纳
1回答
我正在使用redux-persist，它很棒。
然而，当我尝试只在开发中使用它时，它似乎不起作用。我在这里做错什么了？
store.js
import thunk from 'redux-thunk';
import { createStore, applyMiddleware, compose } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storag
浏览 0提问于2018-06-22得票数 0
1回答
我不明白为什么需要像redux-thunk这样的东西。据我所知，thunk是一个返回函数的函数。在我看来，包装的表达式和中间件的使用似乎更多地混淆了正在发生的事情。摘自redux-thunk的示例代码
import thunk from 'redux-thunk';
// Note: this API requires redux@>=3.1.0
const store = createStore(
rootReducer,
applyMiddleware(thunk)
);
// Meet thunks.
// A thunk is a function
浏览 1提问于2017-05-05得票数 35
我使用redux-thunk作为中间件，并试图连接到redux-firestore。当我运行应用程序时，我得到的是错误"TypeError: Object(.)不是createStore上的“。
import reportWebVitals from './reportWebVitals';
import {createStore,applyMiddleware,compose} from 'redux';
import rootReducer from './store/reducers/rootReducer';
import {Pr
浏览 8提问于2021-03-08得票数 0
回答已采纳
假设组件A需要知道另一个组件是否发送了一个操作，以及通过redux-thunk异步调用API的返回响应，组件A如何监听该操作并对响应做一些事情？
或者，无论是父组件还是子组件，任何组件如何侦听另一个组件分派调用？如果这有意义的话。
几个月来，我一直在学习React/Redux，只是想让您了解一下。
如有任何建议，我们将不胜感激。
浏览 5提问于2017-12-01得票数 4
回答已采纳
我正在尝试安装redux-坚持在一个反应本地应用程序。
但是，我碰到了这个错误：
console.error：“redux-持久化无法创建同步存储。回到"noop”存储
我尝试在"src/redux/index.js“中将存储从存储更改为AsyncStorage，但仍然遇到相同的错误：
import AsyncStorage from '@react-native-community/async-storage';
const config = {
key: "root",
storage: AsyncStorage // At
浏览 0提问于2019-09-04得票数 80
假设我有这样的代码：
import { Action, Dispatch } from 'redux';
import { ThunkAction } from 'redux-thunk';
interface StateTree {
field: string;
}
function myFunc(action: Action | ThunkAction<void, StateTree, void>,
dispatch: Dispatch<StateTree>) {
dispatch(acti
浏览 2提问于2017-03-25得票数 19
回答已采纳
这是我的行动： export async function load_todo(){
const data = await fetch(url).then(data => data.json())
return (dispatch) =>{
dispatch({
type: LOAD_TODO,
payload: data
})
}
} 我已经把thunk中间件放到我的商店里了 import { applyMiddleware, createStore } from 're
浏览 20提问于2021-06-28得票数 0
回答已采纳
我尝试了redux的所有命令，但都不起作用:你认为解决方案是什么？这些是我尝试过的命令
yarn add react-redux
yarn add reduxjs / Redux-thunk#master
npm install --save Redux react-redux
npm install redux -- save
npm i redux -- save
yarn add redux-thunk
index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import
浏览 6提问于2020-02-13得票数 3
1回答
我试图在redux中创建一个存储，目前我使用以下语法：
const middlewares = [
thunk,
logger
]
const wlStore = createStore(
rootReducer,
initialState
compose(applyMiddleware(...middlewares))
)
上面的方法对我来说很好，我可以访问商店，但我最近遇到了另一种语法：-
const wlStore=applyMiddleware(thunk,logger)(createStore)(rootReducer)
他们两个似乎都在做同样的工作。
有没有什
浏览 0提问于2016-12-28得票数 63
回答已采纳
1回答
有没有办法使用redux-thunk中间件监听组件中的某些操作？或者我真的需要使用redux-saga或redux-observable来实现这一点？
这是我的redux-thunk异步操作，我只是想在TICKET_CREATE_SUCCESS操作分派后关闭对话框
export const createTicketEffects = (ticket: Ticket): ThunkAction<void, RootState, unknown, Action<string>> => {
return async (dispatch: ThunkDispatc
浏览 1提问于2021-03-06得票数 0
我有一个需求，我必须使用RTK查询来获取数据，并使用Redux-thunk进行全局状态管理。同样，我已经创建了两个独立的商店，一个为RTK，另一个为redux。现在我面临的问题，因为我们不应该有两个商店在我们的应用程序。
第一店：-
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import combineReducer from './combineReducer';
export const co
浏览 10提问于2022-01-06得票数 0
1回答
所以我现在是redux的新手，并且还停留在中间件部分。我需要知道这两个代码是如何相互作用的。
我的动作创建者：
import jsonPlaceHolder from '../APis/jsonPlaceHolder';
export const fetchPosts= ()=>{
return async (dispatch)=>{
const response = await jsonPlaceHolder.get('/posts');
dispatch({type:'FETCH_POSTS',
浏览 0提问于2020-01-27得票数 1
2回答
我被这个问题卡住了。任何帮助都将不胜感激。 我在我的react原生应用中使用Redux Persist，我想在App.js中从store.js访问存储在状态'number‘中的数据。 我已经在下面粘贴了我的代码。 这是我的actions.js export const setNumber = number => dispatch => {
dispatch({
type: SET_NUMBER,
payload: number,
});
}; reducers.js import {SET_NUMBER} from './actions&#
浏览 29提问于2021-08-16得票数 0
1回答
我正在使用react-redux开发一个应用程序，并评估该应用程序的性能。我的redux store配置工作正常，在我将react性能添加到applayapplyMiddleware之前，我没有任何问题。redux存储配置：
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './../reducers/rootReducer';
import promise
浏览 0提问于2018-05-17得票数 0
新的redux有一个内置的存储模板，以及启动react redux应用程序所需的所有东西，但它在幕后使用redux-thunk进行异步调用。用redux-saga代替thunk是不可能的。
浏览 10提问于2020-07-28得票数 0
回答已采纳
我在我的项目中使用redux，redux-thunk和react，这不是实际的代码，而是代码的简化版本，所以可能有一些语法错误，但问题是它应该如何工作。
我使用了react-redux connect的react包装器。
在我的操作中，我使用redux-thunk如下：
return function (dispatch, state) {
dispatch(oneAction);
dispatch(secondAction);
dispatch(thirdAction);
}
UI只在thirdAction之后呈现，这很好，但是我不知道是什么告诉系统现在呈
浏览 0提问于2017-07-12得票数 0
1回答
我最近开始研究redux的部分。据我理解，它应该用于处理异步操作，或者需要从其他操作中分派操作。因此，我已经配置了我的商店，例如：
import {applyMiddleware, createStore} from "redux";
import rootReducer from "./rootReducer";
import thunk from "redux-thunk";
import { composeWithDevTools } from 'redux-devtools-extension'; // used by r
浏览 2提问于2021-12-14得票数 0
2回答
嘿，伙计们，我在使用redux thunk和nextjs，现在我想在我的应用程序中添加redux-persist。所以最初我的代码是这样的 import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import reducer from './reducers';
export cons
浏览 26提问于2020-04-01得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
