[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;
最新文章
- ubuntu12.04下root启动wireshark报错解决办法
- dedecms \plus\guestbook.php SQL Injection Vul By \plus\guestbook\edit.inc.php
- POJ 2528 Mayor&#39;s posters(线段树/区间更新 离散化)
- [转]Aptana Studio 3配置Python开发环境图文教程
- img、input到底是行内还是块级元素?
- 将m个苹果放入n个盘子的问题【转】
- C# 程序集反射
- iOS音频处理
- Sql Server trace flags
- [DevExpress]图表开发工具类 ChartUtils
- 一致性哈希(Consistent Hashing)
- Dockerfile的书写规则及指令使用方法
- 京东2019春招Java工程师编程题题解
- 回顾4180天在腾讯使用C#的历程,开启新的征途
- SQLServer之创建唯一非聚集索引
- linux shell 脚本 svn自动更新项目并且打包 、发布、备份
- 安装FrameWork后重新注册IIS
- excel的宏与VBA入门(一)——基础概念
- sql日期格式处理
- 前端切图相关ps技术