标签: redux-devtools-extension

我无法将使用redux的react-native应用程序通过remote-redux-devtools连接到redux-devtools-extension。

我正在使用通过MacOSX Sierra上的USB连接的android设备。

// configureStore.js
import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from 'remote-redux-devtools';
import thunk from "redux-thunk";
import rootReducer from "./reducers";

const composeEnhancers = composeWithDevTools({ realtime: true });

export default function configureStore(initialState) {
  const store = createStore(
    rootReducer,
    initialState,
    composeEnhancers(
      applyMiddleware(thunk),
    )
  );

  if (module.hot) {
    // Enable hot module replacement for reducers
    module.hot.accept(() => {
      const nextRootReducer = require('./reducers/index').default;
      store.replaceReducer(nextRootReducer);
    });
  }

  return store;
};

Redux已正确配置到应用中，只需执行简单的按钮操作即可更新Redux状态。

但是它找不到任何商店。

我想念什么？

我正在使用以下示例应用程序来学习angular + ngrx。 APM示例NgRx应用

我已经安装了Redux firefox扩展。但是，每当我运行/重新加载应用程序时，“ redux”选项卡都会显示“找不到存储”消息。该应用程序按预期方式工作（能够保留状态）。我能够调度动作，在化简器中进行处理等。请帮助..我被困在很长一段时间。

我有每秒执行一次的动作。它是从Web套接字连接中分派的，该套接字每秒钟接收一次数据。

这使我的devtool充满了许多这样的动作，因此使调试其他动作和东西变得困难。

有没有办法从记录器中过滤掉所有这些“噪音”

我尝试执行以下操作：

const composeEnhancers =
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
    actionsBlacklist: 'METER_DATA_RECEIVE'
  }) || compose;

但这不仅可以过滤记录器中的操作，还可以过滤应用程序中的操作。即，它没有被调度，所以它和不调用我不想要的动作一样好。

换句话说，我希望分派但未登录到redux dev工具中的操作

我决定将 RNDebugger 和 Redux Devtools 扩展包添加到我的应用程序中，以帮助调试以及稍后使用 redux persist 进行测试（我尚未实现）。因此，我现在为我的 React Native 应用程序的状态架构使用以下包：React Redux、Redux、Redux Thunk、RNDebugger 和 Redux Devtools Extension。根据其文档，RNDebugger 和 Redux Devtools 扩展已作为开发依赖项安装。我在创建 redux 存储时使用 composeWithDevTools 函数。所以我想知道，由于 composeWithDevTools 函数是 Redux Devtools 扩展包的一部分，我是否必须安装 RNDebugger 和 Redux Devtools 扩展作为生产依赖项？我不想在生产中使用调试器，但我也不希望应用程序在进入生产时失败，因为 composeWithDevTools 函数未知。我的代码工作正常，我可以在 RNDebugger 中看到 redux 存储（很好！）。尽管如此，这是我的基本设置：

// Store.js
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from "redux-devtools-extension";
import ReduxThunk from 'redux-thunk';
import reducers from '@reducers/';

export default createStore(
  reducers,
  composeWithDevTools(
    applyMiddleware(ReduxThunk)
  )
);

// App.js
import React, { Component } …

我是Redux的新手，还是Redux devtool的新手。

我制作了一个简单的应用程序，您可以在其中单击用户，并显示有关该用户的一些数据。

所以基本上在状态下，我有当前选择的用户。

但是我不知道为什么在redux devtool中状态总是空虚。（不在应用程序中）

这是我创建商店的地方：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

import App from './components/app';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware()(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>
  , document.querySelector('.container'));

这是动作：

export const USER_SELECTED = 'USER_SELECTED'
export function selectUser(user){
    return {
        type : USER_SELECTED,
        payload : user
    }

}

这是一个减速器：

import {USER_SELECTED} from '../actions/index'
export default function (state = null,action){
    switch(action.type){ …

我遵循了这里的指南：https ://redux-observable.js.org/docs/basics/SettingUpTheMiddleware.html（部分：Redux DevTools）

商店的配置方式如下：

// @flow

import { createStore, compose, applyMiddleware } from 'redux';
import { createEpicMiddleware } from 'redux-observable';
import { createReducer } from './reducer';
import { epic } from './epic';

const initialState = {};

const configureStore = () => {
  const epicMiddleware = createEpicMiddleware(epic);
  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
  const enhancers = composeEnhancers(applyMiddleware(epicMiddleware));
  const store = createStore(createReducer(), initialState, enhancers);
  return store;
};

export { configureStore };

但是，如果我没有安装 Redux Devtools 扩展，我的 React 应用程序（使用 CRA 引导）将无法工作。

有人可以告诉我我做错了什么吗？

缺少扩展的错误日志： …

在为 react-native 设置 Redux devTools 时需要帮助我在这里有非常简单的 reducer 和 createStore，我尝试合并 redux-devtools-extension，这样我就可以调试我的 react-native 应用程序，但我在 Redux 中“找不到商店”标签

import { createStore, applyMiddleware} from 'redux'
import {reducer} from "./reducers"
import { composeWithDevTools, devToolsEnhancer } from 'redux-devtools- 
extension'

let store = createStore(reducer, devToolsEnhancer());

export const reducer = (state=[], action) => {
switch(action.type) {
    case "ADD_MEMBER":                   
        return [...state, {categoryID: 0, name: "Bill", zip: "27733", id: 4}]         
    default:
        return state
}
return state;
}

我无法弄清楚在 redux 商店中同时使用 devToolsExtension 和中间件的确切方法。

下面是我的 redux 商店代码。

import {createStore, combineReducers, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import counterReducer from './../reducers/counterReducer';

const reducers = combineReducers({
    counter: counterReducer
});
const store = createStore(
    reducers, 
    {counter: {count:0} },
    // window.devToolsExtension && window.devToolsExtension(), 
    applyMiddleware(thunk)
);

export default store;

因为 createStore() 需要 3 个参数。在应用中间件 thunk 之前，我将它用作下面的代码，这对我来说很好用。

const store = createStore(
    reducers, 
    {counter: {count:0} },
    window.devToolsExtension && window.devToolsExtension()
);

现在，我需要使用 devToolsExtension 并同时应用中间件。

我试图将 devToolsExtension 和 applyMiddleware 放在数组中，以便它充当第三个参数，但这不起作用。

const store = createStore(
    reducers, 
    {counter: {count:0} …

我正在检查 Redux DevTools 操作历史记录中的特定操作，现在我找不到返回最新操作的按钮，因此如果调度了任何其他操作，我总是保持最新的操作而不是需要手动单击最新的一个以从先前选择的一个切换到它。

我正在 React 中进行存储，并且 Typescript 有一个问题，说 “composeWithDevTools 期望 1 个参数，但得到 2 个”。 我四处搜索，发现很多人都像我一样编写了代码，所以我找不到问题所在。是否有人可以解释为什么会出现此错误以及如何解决此问题？我真的很感激！

import { applyMiddleware, configureStore } from '@reduxjs/toolkit';
import { composeWithDevTools } from 'redux-devtools-extension';
import reducer from './modules/reducer';
import createSagaMiddleware from '@redux-saga/core';
import rootSaga from './modules/rootSaga';

const create = () => {
  const sagaMiddleware = createSagaMiddleware();
  const store = configureStore(
    reducer, 
    composeWithDevTools(applyMiddleware(sagaMiddleware))
    );

    sagaMiddleware.run(rootSaga);

  return store;
}

export default create;

以及错误消息。

这是我的软件包版本。

"packages": {
    "": {
      "name": "my-books",
      "version": "0.1.0",
      "dependencies": {
        "@reduxjs/toolkit": "^1.9.1",
        "@testing-library/jest-dom": "^5.16.5",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": …

这是我的代码

import React        from "react";
import ReactDOM     from "react-dom";
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import "normalize.css/normalize.css"
import  "./styles/styles.scss";
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import reduxThunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';

import AppRouter from './routers/AppRouter';
import reducers from './reducers';
import {AUTH_USER} from "./actions/types";

//
const createStoreWithMiddleware =  applyMiddleware(reduxThunk)(createStore);
const store = createStoreWithMiddleware(reducers);


const token = localStorage.getItem('token');
if(token){
    store.dispatch({type:AUTH_USER});
}

ReactDOM.render(
    <Provider store={store}>
        <AppRouter />
    </Provider>
    , …

编译此代码时，出现此错误SyntaxError：意外令牌，预期为“，”。我希望你能帮我这个忙。在线错误（13:39）

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import rootReducers from './reducers';

const initialState = {};

const middleware = [thunk];

const store = createStore({
    rootReducers,
    initialState,
    composeWithDevTools(applyMiddleware(...middleware))
});

export default store;

谢谢