• [OHIF-Viewers]医疗数字阅片-医学影像-辅助工具-Redux DevTools-DevTools for Redux with hot reloading, action replay, and customizable UI


    [OHIF-Viewers]医疗数字阅片-医学影像-辅助工具-Redux DevTools-DevTools for Redux with hot reloading, action replay, and customizable UI

    Redux DevTools for debugging application's state changes.
    The extension provides power-ups for your Redux development workflow. Apart from Redux, it can be used with any other architectures which handle the state.

    It's an opensource project. See the official repository for more details:

    https://github.com/zalmoxisus/redux-devtools-extension

    Redux DevTools Extension

    Join the chat at https://gitter.im/zalmoxisus/redux-devtools-extension PRs Welcome OpenCollective OpenCollective

    Demo

    Installation

    1. For Chrome

    • from Chrome Web Store;
    • or download extension.zip from last releases, unzip, open chrome://extensions url and turn on developer mode from top left and then click; on Load Unpacked and select the extracted folder for use
    • or build it with npm i && npm run build:extension and load the extension's folder ./build/extension;
    • or run it in dev mode with npm i && npm start and load the extension's folder ./dev.

    2. For Firefox

    3. For Electron

    4. For other browsers and non-browser environment

    Usage

    Note that starting from v2.7, window.devToolsExtension was renamed to window.__REDUX_DEVTOOLS_EXTENSION__ / window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__.

    1. With Redux

    1.1 Basic store

    For a basic Redux store simply add:

     const store = createStore(
       reducer, /* preloadedState, */
    +  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
     );

    Note that preloadedState argument is optional in Redux's createStore.

    For universal ("isomorphic") apps, prefix it with typeof window !== 'undefined' &&.

    const composeEnhancers = (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;

    For TypeScript use redux-devtools-extension npm package, which contains all the definitions, or just use (window as any) (see Recipes for an example).

    const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

    In case ESLint is configured to not allow using the underscore dangle, wrap it like so:

    + /* eslint-disable no-underscore-dangle */
      const store = createStore(
       reducer, /* preloadedState, */
       window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
      );
    + /* eslint-enable */

    Note: Passing enhancer as last argument requires redux@>=3.1.0. For older versions apply it like here or here. Don't mix the old Redux API with the new one.

    You don't need to npm install redux-devtools when using the extension (that's a different lib).

    1.2 Advanced store setup

    If you setup your store with middleware and enhancers, change:

      import { createStore, applyMiddleware, compose } from 'redux';
    
    + const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
    + const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
    - const store = createStore(reducer, /* preloadedState, */ compose(
        applyMiddleware(...middleware)
      ));

    Note that when the extension is not installed, we’re using Redux compose here.

    To specify extension’s options, use it like so:

    const composeEnhancers =
      typeof window === 'object' &&
      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
          // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
        }) : compose;
    
    const enhancer = composeEnhancers(
      applyMiddleware(...middleware),
      // other store enhancers if any
    );
    const store = createStore(reducer, enhancer);

    See the post for more details.

    1.3 Use redux-devtools-extension package from npm

    To make things easier, there's an npm package to install:

    npm install --save redux-devtools-extension
    

    and to use like so:

    import { createStore, applyMiddleware } from 'redux';
    import { composeWithDevTools } from 'redux-devtools-extension';
    
    const store = createStore(reducer, composeWithDevTools(
      applyMiddleware(...middleware),
      // other store enhancers if any
    ));

    To specify extension’s options:

    import { createStore, applyMiddleware } from 'redux';
    import { composeWithDevTools } from 'redux-devtools-extension';
    
    const composeEnhancers = composeWithDevTools({
      // Specify name here, actionsBlacklist, actionsCreators and other options if needed
    });
    const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
      applyMiddleware(...middleware),
      // other store enhancers if any
    ));

    There’re just few lines of code added to your bundle.

    In case you don't include other enhancers and middlewares, just use devToolsEnhancer:

    import { createStore } from 'redux';
    import { devToolsEnhancer } from 'redux-devtools-extension';
    
    const store = createStore(reducer, /* preloadedState, */ devToolsEnhancer(
      // Specify name here, actionsBlacklist, actionsCreators and other options if needed
    ));

    1.4 Using in production

    It's useful to include the extension in production as well. Usually you can use it for development.

    If you want to restrict it there, use redux-devtools-extension/logOnlyInProduction:

    import { createStore } from 'redux';
    import { devToolsEnhancer } from 'redux-devtools-extension/logOnlyInProduction';
    
    const store = createStore(reducer, /* preloadedState, */ devToolsEnhancer(
      // options like actionSanitizer, stateSanitizer
    ));

    or with middlewares and enhancers:

    import { createStore, applyMiddleware } from 'redux';
    import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProduction';
    
    const composeEnhancers = composeWithDevTools({
      // options like actionSanitizer, stateSanitizer
    });
    const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
      applyMiddleware(...middleware),
      // other store enhancers if any
    ));

    You'll have to add 'process.env.NODE_ENV': JSON.stringify('production') in your Webpack config for the production bundle (to envify). If you use create-react-appit already does it for you.

    If you're already checking process.env.NODE_ENV when creating the store, include redux-devtools-extension/logOnly for production environment.

    If you don’t want to allow the extension in production, just use redux-devtools-extension/developmentOnly.

    See the article for more details.

    1.5 For React Native, hybrid, desktop and server side Redux apps

    For React Native we can use react-native-debugger, which already included the same API with Redux DevTools Extension.

    For most platforms, include Remote Redux DevTools's store enhancer, and from the extension's context menu choose 'Open Remote DevTools' for remote monitoring.

    2. Without Redux

    See integrations and the blog post for more details on how to use the extension with any architecture.

    Docs

    Demo

    Live demos to use the extension with:

    Also see ./examples folder.

     
  • 相关阅读:
    EasyDSS视频平台定制项目中普通用户登录无法全局搜索出文件的排查及优化
    EasyDSS前端代码运行npm install命令报错如何处理?
    运行EasyDSS前端代码报错Can't find Python executable“python”如何处理?
    EasyDSS视频平台前端点播服务列表跨页新增水印不展示第二页数据优化
    EasyDSS视频平台点播服务选中点播文件删除失败分析及排查
    EasyDSS视频平台下载录像由于ts文件原因导致MP4文件缺秒问题优化
    ffmpeg推流到服务器如何通过EasyDSS视频平台将视频保存为文件?
    EasyDSS视频平台是如何对直播流和点播流做处理的?
    EasyDSS视频平台点播页选中视频通道进行导出表单操作无反应排查
    如何允许EasyDSS在线课堂系统上传点播文件时文件名带有空格?
  • 原文地址:https://www.cnblogs.com/landv/p/13361779.html
Copyright © 2020-2023  润新知