标签: redux-devtools

我正在我的项目中设置Redux DevTools(https://www.npmjs.com/package/redux-devtools),并希望在构建生产项目时排除DevTools.文档说这可以通过使用以下代码来完成:

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./configureStore.prod');
} else {
  module.exports = require('./configureStore.dev');
}

我已经有一个带常量的模块,所以我已经在那里检查了NODE_ENV.

Constants.PRODUCTION = process.env.NODE_ENV === 'production'

在我的Webpack配置文件中,我有以下代码:

const production = process.env.NODE_ENV === 'production'

var config = {
  // configuration goes here
}

if (production) {
  config.plugins = [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
      },
    }),
  ].concat(config.plugins)
}

当运行set NODE_ENV=production&&webpack构建时,将缩小并使用webpackdosen't缩小构建.但是,在源代码本身中,NODE_ENV未定义:

console.log(process.env.NODE_ENV) // Output: Undefined

如果我将我设置Constants.PRODUCTION为true然后DevTools不包含在构建中.不知怎的,我应该使用DefinePlugin或ProvidePlugin(Redux DevTools文档提到它们但在不同的地方),但我无法弄清楚如何.我使用Windows 10,DevTools 3.0.0和npm脚本来运行构建过程.任何人都可以帮我解决我应该如何在我的webpack配置文件中设置DefinePlugin或ProvidePlugin？

我正在开发一个使用Redux开发工具扩展的React应用程序。它在Node上运行，并使用Webpack进行编译。我最近将应用程序从2升级到了Webpack 4。

通过使用webpack命令，应用程序可以正常编译，但是当我尝试在浏览器中运行它时，出现以下错误，该错误会终止该应用程序：

Uncaught TypeError: Invalid attempt to spread non-iterable instance

configureStore.js我在配置Redux存储的文件中发生了错误。请参阅下面的第7行import { composeWithDevTools } from 'redux-devtools-extension';引起此问题。

configureStore.js

import { createStore, applyMiddleware } from 'redux';
import rootReducer from './rootReducers';
import reduxImmutableStoreInvariant from 'redux-immutable-state-invariant';
import thunk from 'redux-thunk';
import {routerMiddleware} from 'react-router-redux';
import createHistory from 'history/createBrowserHistory';
import { composeWithDevTools } from 'redux-devtools-extension';

const history = createHistory();
const middleware = routerMiddleware(history);

export default function configureStore(){
    return createStore(
        rootReducer,
        composeWithDevTools(
            applyMiddleware(reduxImmutableStoreInvariant(), thunk, ...middleware)
        )
    );
}

当我删除此扩展名时，将加载初始页面。但是，我想将此扩展保留在应用程序中。关于为什么会发生这种情况以及如何使其继续工作的任何想法或建议？以下是其他文件作为参考点。

webpack.config.js …

我们的 ngrx Angular 应用程序运行良好，直到我们卸载 Redux Devtools，此时我们会收到错误：

您在需要流的地方提供了无效的对象。您可以提供 Observable、Promise、Array 或 Iterable。

app.module.ts 中的商店设置如下所示：

StoreModule.forRoot(reducers, {metaReducers}),
!environment.production ? StoreDevtoolsModule.instrument() : [],
EffectsModule.forRoot([SimsEffects, FiltersEffects, OmnipresentEffects, UserEffects, InitEffects]),
StoreRouterConnectingModule.forRoot({stateKey: 'router'})

我们的 ngrx reducers/index.ts 文件如下所示：

export interface AppState {
  router: any,
  omnipresent: OmnipresentState,
  user: UserState
}

export const reducers: ActionReducerMap<AppState> = {
  router: routerReducer,
  omnipresent: omnipresentReducer,
  user: userReducer
}

export function resetStore(reducer) {
  return (state, action) => {
    return reducer(action.type === InitActionTypes.ResetStore ? undefined : state, action)
  }
}

// storeFreeze throws an error early …

我需要将整个 Redux 状态作为 JSON 文件获取，而无需来自 Redux DevTools 的负载或操作，仅获取状态。

国家

追踪结果

每次单击按钮时，dispatch运行两次，如上图。

这是AppBar组件和mapDispatchToProps功能。

const mapStateToProps = state => {
  return {
    title: state.title
  };
};
const mapDispatchToProps = {
  onClick: () => {
    return {
      type: "TOGGLE_SIDEBAR"
    };
  } 
};

const AppBar = props => (
  <Box>
    <Button icon={<Notification />} onClick={props.onClick} />
  </Box>
);
const AppBatContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(AppBar);
export default AppBatContainer;

这是减速机

import {
  TOGGLE_SIDEBAR
} from "../constants/action-types";

const initialState = {
  showBar: false
};

const rootReducer = (state = …

我已经将我的 ngrx 代码更新到第 8 版（使用 Action Creators 等），但我现在不知道如何在 NgRx Store DevTools 中使用 Dispatcher。

在我能够调度这样的操作之前：

{
    type: '[Something] something loaded',
    payload: {
        results: ['a', 'b', 'c']
    }
}

getDefaultMiddleware更新后我收到一个已弃用的警告"@reduxjs/toolkit": "^1.6.1"那么我应该如何删除这个警告。我们还有其他方法可以在configureStore函数中注入默认中间件吗？

import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";
import reducer from "./reducer";
import api from "./middleware/api";
export default function storeConfigure() {
   const store = configureStore({
   reducer,
   middleware: [
      ...getDefaultMiddleware(), 
      api
    ],
  });
  return store;
}

任何帮助表示赞赏谢谢！

语言环境处于我的 redux 应用程序状态。通过 react-devtools（还原选项）更改其值，会更改段落内部值，但不会更改选择框值。如果它再次呈现，它不应该采用与 p 标签内部相同的值吗？

import React, {Component, PropTypes} from 'react'
import {defineMessages, injectIntl, intlShape} from 'react-intl'
const messages = defineMessages({
  spanish: {
    id: 'languageSelector.spanish',
    description: 'Select language',
    defaultMessage: 'Spanish'
  },
  english: {
    id: 'languageSelector.english',
    description: 'Select language',
    defaultMessage: 'English'
  },
  french: {
    id: 'languageSelector.french',
    description: 'Select language',
    defaultMessage: 'French'
  }
})

class LanguageSelector extends Component {
    render () {
      const {formatMessage, locale} = this.props.intl
      return (
        <div>
        <select defaultValue={locale} onChange={(e) => this.handleChange(e)}>
                <option id='es' value='es'>{formatMessage(messages.spanish)}</option>
                <option id='fr' value='fr'>{formatMessage(messages.french)}</option> …

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

我正在使用 redux-devtools，我已经按照文档中的说明配置了我的商店，但跟踪未显示被调用者

const composeEnhancers =
  (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ &&
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
      trace: true,
      traceLimit: 25
    })) ||
  compose;

请帮助我如何获得工作代码。 实际行为

想要的行为

我按照教程,但是,我收到控制台错误:

" 错误:期望减速器成为一个功能 "

这是我的(相关)配置:

WEBPACK.CONFIG.JS:

...
const TARGET = process.env.npm_lifecycle_event;
process.env.BABEL_ENV = TARGET;
...
if( TARGET === "start" || !TARGET ) {
    module.exports = merge( common, {
        devtool : "inline-source-map",
        devServer : {
            contentBase : PATHS.build,
            hot : true,
            progress : true,
            stats : "errors-only"
        },
        plugins : [
            new webpack.HotModuleReplacementPlugin(),
            new webpack.DefinePlugin({
                "process.env.NODE_ENV" : JSON.stringify( "production" )
            })
        ]
    } );
}

INDEX.JS:

import React from "react";
import { render } from "react-dom";
import { Provider …

这是我的代码

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>
    , …