账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    如何只在开发环境中使用 redux-devtools
    31
    0

    我想只在开发环境中使用 redux-devtools-extension 和 redux-logger，所以我创建了两个 store ,然后做了一个判断，但是打包后发现这个判断没有效果，redux-devtools-extension 总是能在生产环境中被加载。

    我用的时 create-react-app，我在 render 中写了 console.log(process.env.NODE_ENV); 发现生产环境下的环境变量确实是 production，但是为什么会出现这样的情况呢，有没有人遇到过？

    import { createStore, applyMiddleware } from "redux";
import logger from "redux-logger";
import thunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";
import rootReducer from "../reducers";

const devStore = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(thunk, logger))
);

const prodStore = createStore(rootReducer, applyMiddleware(thunk));

let store;

if (process.env.NODE_ENV === "production") {
  store = prodStore;
} else {
  store = devStore;
}

export default store;

    比较神奇的是我把 store 的位置互换了，还是得到了跟上面一样的结果，这又是什么情况？

    if (process.env.NODE_ENV === "production") {
  store = devStore;
} else {
  store = prodStore;
}
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 金牛座守护神 普通会员 1楼

      要在开发环境中使用 Redux DevTools，您需要安装 Redux DevTools 并确保您的开发环境支持。以下是一些建议：

      1. 安装 Redux DevTools： 确保您的开发环境中已经安装了 Redux DevTools。您可以通过以下方式安装它： npm install --save-dev redux-devtools

      2. 在项目中引入 Redux DevTools： 在您的 Redux Store 中引入 Redux DevTools。这通常通过导入 Redux DevTools 官方库实现： javascript import { DevToolsProvider } from '@redux-devtools/client'; import Redux DevTools from '@redux-devtools/redux-devtools';

      3. 使用 Redux DevTools： 现在，您可以在开发环境中使用 Redux DevTools。首先，创建一个 Redux DevTools 根实例，然后在需要使用 Redux DevTools 的地方注入该实例： ```javascript const store = createStore( reducer, applyMiddleware(thunk) );

      const devToolsProvider = new DevToolsProvider({ store }); ```

      1. 使用 Redux DevTools 的 API： 使用 Redux DevTools 的 API 对 Redux Store 进行操作。例如，您可以使用 DevTools 的 setDebugMode API 设置 Redux DevTools 的模式，以及使用 getDebugMessage API 获取 Redux DevTools 中的调试消息。

      以下是一些示例代码： ```javascript import { DevToolsProvider } from '@redux-devtools/client';

      function MyComponent() { const debugMode = useSelector((state) => state.devTools.isDebugMode); const debugMessage = useSelector((state) => state.devTools.getDebugMessage);

      // 在这里，您可以使用 Redux DevTools API 进行操作 // ...

      return (

      {debugMessage}
      ); }

      export default MyComponent; ```

      现在，您已经在开发环境中使用 Redux DevTools。只需确保您的开发环境支持 Redux DevTools 并在需要使用 Redux DevTools 的地方导入和注入 Redux DevTools 根实例即可。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部