我可以使用Chrome Dev工具查看/修改Redux商店吗
是的，您可以使用Chrome Dev工具来查看和修改Redux商店。 Chrome Dev工具是一组内置于Google Chrome浏览器中的开发者工具，它提供了一系列功能，可用于调试和分析Web应用程序。以下是使用Chrome Dev工具查看/修改Redux商店的步骤：
- 打开Google Chrome浏览器，并确保已安装最新版本。
- 在浏览器中打开您的Redux应用程序。
- 在浏览器中，右键单击页面上的任何位置，然后选择“检查”或按下Ctrl + Shift + I（Windows）/ Command + Option + I（Mac）来打开Chrome Dev工具。
- 在Chrome Dev工具窗口中，切换到“Elements”选项卡。
- 在“Elements”选项卡中，您可以查看和修改页面上的HTML和CSS代码。
- 要查看Redux商店的状态，您可以在“Console”选项卡中输入以下代码：
console.log(store.getState())。这将打印出Redux商店的当前状态。 - 如果您想修改Redux商店的状态，可以在“Console”选项卡中输入相应的Redux操作代码，例如：
store.dispatch({ type: 'INCREMENT' })。这将触发一个名为'INCREMENT'的Redux操作，从而修改Redux商店的状态。
请注意，使用Chrome Dev工具修改Redux商店的状态可能会对应用程序的行为产生影响。确保在进行任何修改之前，充分了解Redux的工作原理和应用程序的代码逻辑。
对于Redux的更多信息和使用示例，您可以参考腾讯云提供的Redux官方文档：Redux官方文档。
相关·内容
我正在使用Chrome Redux Dev工具来帮助调试我的react应用程序的Redux商店。我添加了一个新的依赖，，它显然使用了redux，因为现在我的商店不再出现在Chrome Redux Dev工具中，我还看到了React Beautiful dnd的商店。
我不喜欢看到这些，因为现在每次我想去我的商店，我都必须手动从列表中选择它。
他们一定要在我的项目中保留react-beautiful-dnd作为依赖项，但阻止它在Chrome Redux Dev工具中显示吗？
也许有某种配置文件可以控制存储的可见性？或者是Redux Dev Tools中控制哪些商店可见的设置？
Chrome Re
浏览 1提问于2021-06-23得票数 0
我正在寻找一个铬的扩展，将能够访问一个现有网页的redux商店。Redux-Dev工具扩展可以从网站读取状态，但我自己的chrome扩展不能以这种方式访问。 例如，假设facebook.com将用户名存储在Redux存储中。我希望我编写的chrome扩展能够访问Facebook.com redux存储中的用户名。这有没有可能呢？ 谢谢!
浏览 19提问于2019-10-03得票数 0
6回答
上下文
我试图调试React应用程序，但不能修改源代码来记录redux变量。在chrome中，我可以通过相关的访问redux存储，但似乎没有类似的方法用于safari。
问题
如何访问Safari的redux商店？我可以使用控制台这样做吗？
浏览 9提问于2020-01-03得票数 9
我使用create-react-app作为我正在开发的一个应用程序的初始脚手架，该应用程序存在于现有的php/jQuery应用程序中。经过一些摆弄，我已经能够通过使用描述的方法在非React应用程序和React应用程序之间建立通信。
我目前正在做的是创建React应用程序的build，然后将其插入到非React应用程序中，但是我发现该应用程序的构建版本的故障排除既慢又麻烦，因为我无法通过Chrome的Redux插件检查Redux商店。我猜，从生产就绪版本检查Redux存储的功能作为create-react-app的一部分被禁用了吗？如果可能的话，我正在尝试避免弹出应用程序，所以我想知道是否有任
浏览 4提问于2017-08-19得票数 1
3回答
我正在尝试测试使用redux存储的react组件。
我见过一个使用redux- Mock -store中的mock Store的示例。
链接：
我会认为我想用我真正的商店来测试。这是有原因的吗？它是否只测试不需要了解真实存储的组件的功能？但是，为什么要使用任何商店呢？
浏览 2提问于2018-06-26得票数 0
我无法正确设置我的redux商店与反应本土化。在远程调试时，我不能使用redux工具。有人能帮忙吗？
浏览 6提问于2021-12-02得票数 1
回答已采纳
app本地调试器应用程序版本: v0.8.1
React本地版本: 0.57.3
我收到了这个错误
It looks like you are passing several store enhancers to createStore(). This is not supported. Instead, compose them together to a single function
在我从0.55更新之前它已经开始工作了。
我就是这样创建我的商店的。
import { createStore, compose, applyMiddleware } from 'redux'
浏览 2提问于2018-10-23得票数 3
回答已采纳
1回答
基本上有一个redux / app应用程序，我在chrome工具中检查了它，我发现它在redux商店中有一个标志，类似于
"premiumFeature": false;
所以我想改变它，看看会发生什么，我该怎么做呢？我如何手动更改它？如何将其公开为全局变量？
浏览 0提问于2016-11-12得票数 3
如何在Chrome扩展的内容脚本和弹出脚本之间同步Redux存储？它们在两个不同的环境中运行。我知道Chrome中有消息传递功能来进行通信。
我想知道如何将它与Redux商店集成起来。或者我应该使用Chrome的存储来帮助同步Redux商店？
浏览 4提问于2015-12-26得票数 1
回答已采纳
我正在尝试设置我的使用React和Redux的chrome扩展项目。我相信我已经成功地设置了redux，因为我正在设法从商店更新中获取一些控制台日志，但我很难让redux dev工具正常工作。目前，当我在我的扩展弹出窗口中检查元素并转到redux选项卡时，我得到了一条“没有找到商店”的消息。我想我已经遵循了的文档
很好，所以我不太确定为什么我会收到这条消息。这是我的store.js文件：
import {createStore} from 'redux';
import testReducer from './reducers/testReducer'
impo
浏览 2提问于2017-07-30得票数 1
由于React被认为是MVC的View，
Sagas会被视为控制器，而商店会被视为模型吗？
React + Redux + Redux Saga MVC吗？
React会被认为是View吗？Saga作为控制者？Redux作为模型？
编辑:我想澄清一下，我想知道这些是否被认为是MVC，以及为什么不是。不是哪个。
浏览 1提问于2019-10-25得票数 3
我目前正在尝试了解react和redux是如何工作的。我克隆了这个，并用chrome开发工具检查了它的外观。商店的结构是这样的："$r.store“。如果我使用create-react-app生成一个项目并复制存储库的代码，那么我的存储的结构就不同了。看起来是这样的："$r.state.store“我做错了什么吗？我是不是做错了什么？
浏览 0提问于2019-01-15得票数 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
3回答
如何将regex保存到Redux商店？
示例：
我已将regex保存在对象中：
const regexes = {
name: /^[a-zA-Z0-9_]*$/
}
将此对象保存到redux存储后，regex将丢失(将其解析为空对象)：
// Dispatch
dispatch(setRegexes(regexes))
// Redux Dev Tools:
{
name: {}
}
Regex即使接收到作为减速机的有效载荷也可以：
// Reducer
case 'SET_REGEXES':
console.log(payload.regexes) //
浏览 2提问于2019-09-25得票数 4
当我在WebStorm (Angular)中调试时，它会启动一个新的会话Chrome浏览器，但删除了所有的扩展，但是我希望在调试会话中保留Redux扩展。有可能吗？
浏览 1提问于2019-04-24得票数 0
我在使用基于javascript的布局时遇到了麻烦，所以我想知道是否有办法使用Chrome Dev工具来知道，例如，JS的哪一行设置了我元素的宽度。chrome能检测到这一点吗？
浏览 1提问于2016-02-06得票数 0
我已经用react和redux构建了一个应用程序。我以标准的方式构建应用程序。 npm run build --prod 然后将该应用程序部署到firebase托管。我发现，除非安装了redux web dev工具，否则该应用程序无法在Chrome、Firefox或Safari中加载。为什么会这样?我怎样才能阻止它？ 该应用程序位于... https://triviatime-e7aa2.web.app/
浏览 3提问于2020-12-02得票数 0
回答已采纳
如何处理从阿波罗查询中检索的数据？
我的第一个想法是将它保存在redux商店中，修改它(使用redux减少它，使用动作创建者)，然后，当数据准备就绪时(用户单击“保存”按钮)，向阿波罗发送一个突变，以便在服务器上更新它。
尽管如此，我不认为这是最好的方法。我应该避免在这里使用Redux商店并直接使用阿波罗命令式API吗？
浏览 4提问于2017-12-11得票数 0
回答已采纳
我已经制定了一条经过授权的路线，但这有一个问题。
用户可以使用redux、和redux、开发工具、铬扩展来更改存储，这可能会导致安全性不足。
用户可以在此开发工具中将权限“权限”更改为另一个单词，并修改应用程序的状态。
您能这样做，这样用户就不能更改商店吗？
App.js
class App extends Component {
render() {
return (
<BrowserRouter>
<Switch>
<AuthorizedComponent path="
浏览 1提问于2018-05-10得票数 1
回答已采纳
处理react-native redux-observable项目(*叹息...)。
在商店的配置上，我似乎有一个错误，但对于我的生活，我不知道为什么。
在加载时获得以下屏幕。
下面是配置文件：(其他的都是标准的)
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import logger from 'redux-logger'
import { createEpicMiddleware, ofType, combine
浏览 2提问于2018-08-08得票数 0
我面临的最大问题是，当我的React应用程序运行在Chrome扩展程序中时，当我试图访问中的redux存储时，我看到了错误的。
我见过一些关于类似错误的问题，比如：
这些问题的大多数答案都涉及到指定正确的变量，比如使用window.__REDUX_DEVTOOLS_EXTENSION__而不是devToolsExtension (在扩展升级之后)，或者安装npm包redux-devtools-extension。
我的问题是不同的-如果我运行我的一个反应应用程序(在开发模式)之外的Chrome扩展(a.k.a )。不是通过Chrome扩展的options页面)，我发现Red
浏览 0提问于2018-06-23得票数 1
我发现能够通过Chrome工具的控制台打印/修改Redux存储是很有用的，但是要做到这一点，我必须在窗口组件中复制存储，如下所示：
window.store = store;
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
通过这种方式，以后可以使用控制台打印存储的内容，例如，使用window.store.getState()：
如何通过控制台直接访问提供商内的商
浏览 9提问于2022-02-07得票数 2
我希望访问资源的状态并更改该状态，以便列表能够相应地呈现，但我不想点击另一个API来这样做。我们能进入redux的redux商店吗？我们怎么能做到呢？
浏览 4提问于2022-01-14得票数 0
我需要了解Chrome商店的开发工具类别中目前存在多少Chrome扩展。
在最初的设计中，商店用来显示每个类别中的扩展/应用程序的数量。但是新的设计似乎没有这些信息.有什么办法能让我知道吗？
浏览 0提问于2013-05-01得票数 0
我看了Redux入门系列，并且正在修改我现有的React代码以使用Redux。
我是否可以/是否应该使用可以直接访问存储的函数来创建一个单独的.js文件，以调用.getState()和.dispatch()，UI组件可以在需要时导入和调用它们，而不是订阅存储本身？
或者我从根本上误解了什么，订阅商店会有完全相同的效果？我的目标是优化速度；这就是我切换到Redux的原因。
浏览 3提问于2018-02-07得票数 0
我正在尝试将我的redux商店移向redux工具包。有利的是，我想把它们都放到createSlice中。 在我收到很多这样的消息之前： export const resetSelection = () => (dispatch, getState) => {
dispatch(clearSelection()); # clears current selection
dispatch(showLoader()); # shows global loading spinner
dispatch(fetchSelection()); # fetching selectio
浏览 6提问于2021-01-25得票数 1
回答已采纳
我对Redux不熟悉。我很难理解操作和还原器相对于直接修改存储的组件的价值。
在Redux中，您的React组件不会直接更改商店。相反，他们发布了一个行动--有点像发布消息。然后，还原器处理操作--有点像消息订阅者--并响应改变状态(更准确地说，创建一个新的状态)。
我觉得这种类似于酒吧/子的交互增加了层层间接，这使得我们很难理解组件到底在做什么--为什么不让组件直接将新的状态传递给Redux商店呢？将类似this.props.setReduxState的东西注入React组件会不会是一件坏事？
我开始理解为什么状态本身需要是不可变的(相关问题-- )的价值，它涉及到检查更新，看看哪些组件道具
浏览 4提问于2016-07-09得票数 5
回答已采纳
我正在尝试将Redux DevTools Chrome扩展添加到我的redux存储中，并在这里描述：
这是我的店：
let store;
const initStore = ({onRehydrationComplete}) => {
store = createStore(
combineReducers({
...reactDeviseReducers,
form: formReducer,
router: routerReducer,
apollo: apolloClient.reducer(),
cats
浏览 4提问于2017-05-24得票数 15
回答已采纳
当我使用redux时，可以提供一个增强器，我编写了自己的增强器，并返回redux devtool增强存储： const myCreateStore = (reducer, initialState, enhancer) => {
console.log('xxxxxx', initialState);
return createStore(reducer, initialState, enhancer);
};
const defaultState ={count:1};
const store = myCreateStore(
reducer,
def
浏览 9提问于2019-09-12得票数 0
回答已采纳
所以，我的想法是用我自己的商店来增强已经创建的商店。
伪代码是这样的：
const store = createStore(reducer);
const myStore = createStore(reducer);
enhanceStore(store, myStore);
这样做的目的是我正在创建一个在幕后使用redux的库，今天我正在配置我自己的库存储……但我不想检查用户是否已经在使用redux，在这种情况下，我想合并我的商店和他的商店。
这不是强制性的合并2个商店，也许我可以增强已创建的商店与一个新的缩减…
谢谢!
浏览 0提问于2016-07-07得票数 6
React Dev Tools非常适合使用Redux，我可以简单地进入并修改props / state来查看对相关Container的影响。
但是，如果所需的Container没有挂载，我需要直接修改Redux存储以使其出现。使用Chrome Dev工具，我可以找到Redux存储，它是顶级的<Provider />组件，我甚至可以看到getState方法，但是有没有修改底层状态的方法呢？
浏览 3提问于2017-02-20得票数 33
回答已采纳
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
回答已采纳
1回答
我想像这样构造我的redux商店，并添加更多的searchForm兄弟姐妹：
import { Map } from 'immutable'
const searchForm = Map(
{
'categories': ['meat'],
'mealTypes': [],
'location': {
place: {},
distanceFromPlaceValue: 10,
distanceFromPlaceUnit: 'k'
浏览 5提问于2017-04-13得票数 0
回答已采纳
以下是我正在使用的版本：
"redux": "^4.0.5",
"react-redux": "^7.2.0",
"redux-firestore": "^0.13.0"
"firebase": "^7.14.3",
"redux": "^4.0.5",
"react-redux-firebase": "^3.4.0",
我在创建商店时遇到了这个错误：
const store = crea
浏览 16提问于2020-05-11得票数 0
回答已采纳
1回答
我刚刚在我的服务器上设置了graphql，并希望将阿波罗连接到我的前端。
我能够集成阿波罗与Redux ()，但现在想要映射状态到道具通过redux连接。
我当前的Home组件如下所示：
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { graphql } from 'react-apollo';
import './Home.css'
class Home extends Component {
浏览 1提问于2017-07-17得票数 1
回答已采纳
1回答
我正在开发一个使用Node.js，react和Redux登录功能的管理页面。
对于登录，我使用了jwt。我的问题是，使用这个安全吗？因为，我在应用程序周围设置了Provider和商店。在内部，我检查user.isauthenticated()是否为adminpage，否则为loginpage。
让我担心的是商店。登录页面和管理页面中的存储是相同的。所以我有权从登录页面到商店，这是连接到管理页面。
有两个独立的商店不是更安全吗？
浏览 0提问于2018-10-27得票数 0
我试图通过useDispatch方法更新redux中的商店，但是我收到了这样的消息：
试图导入错误：“useDispatch”不是从“redux”导出的。
我使用这个方法来调用操作来更新我的商店。
import { useDispatch } from 'react-redux';
import { loggedInAction } from './redux';
const userInfo = () => {
const dispatch = useDispatch();
const loggedIn = user => dispatc
浏览 1提问于2019-06-10得票数 19
回答已采纳
为了在我的应用程序中处理离线交互，我使用redux-offline。当应用程序重新启动时，我的redux商店中的脱机状态不是持久的。
例如，我的应用程序处于离线状态，用户以调用要分派的操作的方式与应用程序交互。Redux-offline将操作转移到处于redux存储的离线状态的发件箱阵列，该阵列应在应用程序恢复在线时重试该操作。如果我这样做，并让一个操作在脱机状态下排队，然后重新启动应用程序(在仍然脱机的情况下)，redux存储将保留除脱机状态之外的所有内容，因此我将丢失已排队的项目。
我的商店配置代码如下。我写它的方式是，在redux存储恢复状态之前，会显示一个启动屏幕。
import Re
浏览 0提问于2017-10-24得票数 0
我在做日历应用。
当用户导航到下个月时，我希望启动获取数据的操作。
激发的动作列表本质上是动态的，它取决于当前安装的组件。
我目前正在将要触发的操作列表存储在列表中(在模块中)
我觉得我在redux商店之外存储数据，这是一种非常规的做法。
但我在某个地方读到，redux商店应该存放可串行化的东西。我的操作(实际上是将被redux-thunk使用的动作创建者)是不可串行化的。
所以问题是，
如果是这样，那么将数据存储在redux存储之外是个坏主意吗？
为什么在redux存储中存储不可串行化的数据是个坏主意？
动作创建者(我存储在列表中)如下所示
function foo(para
浏览 1提问于2016-10-17得票数 0
我已经在我的应用程序中使用了react-native-router-flux，并配置了商店，它工作得很棒。
我现在计划在我的应用程序中使用react-NavigationV2.8，我正在努力完成configureStore。
我假设configureStore将按照react-native-router-flux示例的方式使用。下面是我的react-native-router-flux示例中的示例代码。
/* global __DEV__ */
import { Router } from 'react-native-router-flux'; //this is not to
浏览 0提问于2018-12-30得票数 0
9回答
我正在创建一个带有react、redux和next.js的项目，并希望导入js中的CSS文件。
我遵循和中的说明，但发现CSS样式不起作用。
我的代码如下：
页/index.js：
import React from 'react'
import "../style.css"
class Index extends React.Component {
render() {
return (
<div className="example">Hello World!</di
浏览 12提问于2018-05-03得票数 33
当在Chrome和Firefox中查看页面时，它们会显示一个非常小的h1标题，并且它会改变颜色，就好像它是一个链接一样。生成所有内容的模板看起来就像它应该的样子。在诊断问题时，当我查看源代码时，代码的相关部分如下所示：
<div class="page-heading">
<h1>Title Here</h1>
</div>
然而，当我在Chrome的开发工具中查看它的时候，它是附加了异乎寻常的畸形锚标签，这显然导致了悬停行为。在开发工具中，这就是它的样子：
<div class="page-heading&
浏览 1提问于2012-10-04得票数 5
因为Immer已经从Redux dev工具包导入。如何从Redux dev工具包导入Immer？这样我们就不需要在包中为immer添加单独的导入。
浏览 15提问于2020-11-23得票数 0
1回答
Redux工具chrome 突然停止工作。它记录事件，但UI只是没有响应，没有任何东西是可点击的。我认为我的应用程序可能有问题，但即使我尝试了，它也有同样的问题。很好，我不知道我做错了什么。我已经试过了，但什么也没成功。
重新安装Redux dev chrome扩展
重新安装Chrome
重新启动计算机
我可以使用Firefox插件来调试Redux，但是我对chrome调试器很满意。请提出任何解决方案。
浏览 2提问于2017-12-14得票数 1
我正在使用一个，我们使用npm install --save-dev redux-devtools-extension安装了Redux，并像这样使用它：
import { composeWithDevTools } from 'redux-devtools-extension'
const store = createStore(
reducer,
composeWithDevTools()
)
我的理解是--save-dev标志意味着这个包不会在生产中使用。本课程的下一节将介绍Redux并使用npm install redux-thunk进行安装。如果我没有弄错，这
浏览 4提问于2021-08-16得票数 3
在调试我的Redux存储(运行React)时，我一直收到以下消息
抱歉：“序列化我们的大型状态一直在崩溃redux。我希望有一天能把它带回来，但现在您可以在控制台中使用TS.redux.getState()查看状态。”
还有其他人看过这个吗？
并且冒着愚蠢的风险，然后在控制台中运行TS.redux.getState()并获得
at 1468:1未定义的ReferenceError: TS未定义为:1:1
除了在信息中说的话之外，还有什么是为什么会发生的呢？
据我所知，我正在运行最新版本2.15.1的Chrome
浏览 0提问于2017-10-25得票数 5
回答已采纳
1回答
我是新来的反应。
我已经使用npm install create-react-app安装了React。我已经创建了一个server.js文件，我的文件结构就在这里。
package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.17.1",
浏览 4提问于2017-12-30得票数 1
回答已采纳
1回答
我似乎无法修改immutable.js记录，这是我的应用程序的redux商店。
let makeVepo: RecordFactory<any> = Record({
product: new makeProduct(),
menu: new makeMenu(),
formControls: new makeFormControls(),
some: 10
})
export const vepo = new makeVepo()
vepo.set('some', 200)
vepo.some不更新为200，它将保持10
我的redux商店不会
浏览 2提问于2018-04-22得票数 5
回答已采纳
2回答
我正在使用和，我刚刚尝试了redux-form:很棒的工作，使用起来很有趣！然而，我猜每次我修改一个fied时，应用程序的状态都会改变。将每个点击的新键保存在字段中。它减慢了字段刷新的速度！
这是redux devtool停靠面板，它显示了应用程序状态的变化：
下面是我如何将redux-devtool链接到我的应用商店：
const createStoreWithMiddleware = (() => {
//DEv too only available in development
if (__DEV__ && window &&
浏览 1提问于2016-04-27得票数 1
我使用了redux - persisting将数据持久化到redux存储中。我现在在商店中添加了一些新的标志，但是当应用程序从商店更新时，它不会得到新的标志，因为它有旧的本地存储，并且本地存储在更新应用程序时不会清除。这会导致应用程序崩溃，直到我在删除应用程序后重新安装它。 'use strict';
/* React Native */
import { AsyncStorage } from 'react-native';
/* Officetrax */
import { createStore, applyMiddleware } from
浏览 10提问于2019-09-12得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
