[AngularJS NG-redux] Integrate Redux Devtools
angularjs redux NG devtools
2023-09-14 08:59:19 时间
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;
相关文章
- AngularJS进阶(十一)AngularJS实现表格数据的编辑,更新和删除[通俗易懂]
- angularjs子组件向父组件传值_react子组件传值
- [angularjs] angularjs系列笔记(七)HTML DOM详解编程语言
- AngularJS将获得长期支持和发展详解编程语言
- 让angularjs支持浏览器自动填表
- angularjs中的单元测试实例
- AngularJS入门教程之学习环境搭建
- 什么是AngularJS?AngularJS简介
- AngularJS初始化过程分析(引导程序)
- AngularJS入门知识之MVW类框架的编程思想探讨
- angularjs处理多个异步请求方法汇总
- AngularJS实现表单验证
- jQuery和AngularJS的区别浅析