zoukankan      html  css  js  c++  java
  • [AngularJS NG-redux] Integrate Redux Devtools

    In this lesson, we are going to learn how to integrate Redux Devtools into our Angular application.

    Redux Devtools is a live-editing time travel environment for Redux. Devtools boasts a list of awesome features but my two favorite ones are that we can inspect every state and action as it happens and we can go back in time by “cancelling” actions.

    This is going to be an interesting lesson because, in order for this to work, we are going to need to make something that was written for React work in Angular. For the most part, everything will play side by side with one small trick that we will pull off at the end to force an Angular digest cycle when React manipulates the application store.

    Install:

    npm install --save-dev bable-preset-react
    npm install --save react react-dom redux-devtools redux-devtools-dock-monitor redux-devtools-log-monitor

    app.js:

    Import:

    import React, {Component} from 'react';
    import ReactDom from 'react-dom';
    import {createDevTools} from 'redux-devtools';
    import LogMonitor from 'redux-devtools-log-monitor';
    import DockMonitor from 'redux-devtools-dock-monitor';
    const DevTools = createDevTools(
      <DockMonitor toggleVisibilityKey='ctrl-h'
    changePositionKey='ctrl-q'
    defaultIsVisible={false}>
      <LogMonitor theme='tomorrow' />
      </DockMonitor>
    );
    
    const run = ($ngRedux, $rootScope) => {
      'ngInject';
    
      const componentDidUpdate = DockMonitor.prototype.componentDidUpdate;
      DockMonitor.prototype.componentDidUpdate = function() {
        $rootScope.$evalAsync();
        if (componentDidUpdate) {
          return componentDidUpdate.apply(this, arguments);
        }
      };
    
      ReactDom.render(
      <DevTools store={$ngRedux}/>,
        document.getElementById('devTools')
      );
    };
    
    const config = $ngReduxProvider => {
      'ngInject';
      $ngReduxProvider.createStoreWith(rootReducers, [thunk], [DevTools.instrument()]);
    };

    Open devtools:

    ctrl + h


    import 'bootstrap-css-only';
    import 'normalize.css';
    
    import angular from 'angular';
    import CommonModule from './common/common';
    import ComponentsModule from './components/components';
    import thunk from 'redux-thunk';
    import template from './app.html';
    import './app.css';
    
    import React, {Component} from 'react';
    import ReactDom from 'react-dom';
    import {createDevTools} from 'redux-devtools';
    import LogMonitor from 'redux-devtools-log-monitor';
    import DockMonitor from 'redux-devtools-dock-monitor';
    
    import { categories, CategoriesActions, category } from './components/categories/category.state';
    import { bookmarks, BookmarksActions, bookmark } from './components/bookmarks/bookmarks.state';
    import ngRedux from 'ng-redux';
    import { combineReducers } from 'redux';
    const rootReducers = combineReducers({
      categories,
      category,
      bookmarks,
      bookmark
    });
    
    
    
    const DevTools = createDevTools(
      <DockMonitor toggleVisibilityKey='ctrl-h'
    changePositionKey='ctrl-q'
    defaultIsVisible={false}>
      <LogMonitor theme='tomorrow' />
      </DockMonitor>
    );
    
    const run = ($ngRedux, $rootScope) => {
      'ngInject';
    
      const componentDidUpdate = DockMonitor.prototype.componentDidUpdate;
      DockMonitor.prototype.componentDidUpdate = function() {
        $rootScope.$evalAsync();
        if (componentDidUpdate) {
          return componentDidUpdate.apply(this, arguments);
        }
      };
    
      ReactDom.render(
      <DevTools store={$ngRedux}/>,
        document.getElementById('devTools')
      );
    };
    
    const config = $ngReduxProvider => {
      'ngInject';
      $ngReduxProvider.createStoreWith(rootReducers, [thunk], [DevTools.instrument()]);
    };
    
    const AppComponent = {
      template
    };
    
    let appModule = angular.module('app', [
      CommonModule.name,
      ComponentsModule.name,
      ngRedux
    ])
      .config(config)
      .run(run)
      //.value('store', store)
      .factory('CategoriesActions', CategoriesActions)
      .factory('BookmarksActions', BookmarksActions)
      .component('app', AppComponent);
    
    export default appModule;
  • 相关阅读:
    Redis持久化
    Windows Phone中扩展WebBrowser使其支持绑定html内容
    使用MVVM-Sidekick开发Universal App(二)
    使用MVVM-Sidekick开发Universal App(一)
    在Windows Phone 8中使用Live Connect并保持登陆状态
    iOS 打印结构体
    CGAffineTransformMake 矩阵变换 的运算原理(转)
    二维码快速扫描工具
    微信小程序之wx.request:fail错误,真机预览请求无效问题解决,安卓,ios网络预览异常(转)
    UIView的setNeedsLayout, layoutIfNeeded 和 layoutSubviews 方法之间的关系解释(转)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6066906.html
Copyright © 2011-2022 走看看