在进行React-Redux实践时，碰到下面这样一个场景，执行一个UI操作需要链式次序分发多个Action。 例如，删除一个post时，需要通过axios删除选中的post，然后通过axios获取所有post以刷新post列表，最后将选中的post id设为空。 前两个action为异步action，后一个action为同步action。 下面就对我的实践进行一下总结。 实现 PostActions.js: ...... export const handleSelectIdChange = selectedId => ({ type: types.UPDATE_SELECTED_ID, payload: { data: selectedId } }); ...... export const getPosts = () => { return dispatch => { dispatch(getPostsStarted()); return axios .get('/api/posts') .then(res => { dispatch(getPostsSuccess(res.data)); }) .catch(err => { dispatch(getPostsFailure(err.message)); }); }; } export const getPostsSuccess = posts => ({ type: types.GET_POSTS_SUCCESS, payload: { data: posts } }); export const getPostsStarted = () => ({ type: types.

Devias Kit - React Admin Dashboard 使用了ESLint进行代码检测，使用Prettier进行代码格式化。 下面就其代码devias-io/react-material-dashboard 进行学习。 ESLint简介 ESLint 是一个用来识别ECMAScript/JavaScript并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。如果每次在代码提交之前都进行一次ESLint代码检查，就不会因为某个字段未定义为undefined或null这样的错误而导致服务崩溃，可以有效的控制项目代码的质量。 在许多方面，它和 JSLint、JSHint 相似，除了少数的例外： ESLint使用Espree解析JavaScript。 ESLint使用AST去分析代码中的模式。 ESLint是完全插件化的。 每一个规则都是一个插件并且你可以在运行时添加更多的规则。 Prettier简介 Prettier 是一个opinionated(有态度的)代码格式化工具，支持多种语言，可以和绝大多数编辑器集成，选项少。 什么是opinionated？就是有态度有倾向，尽量减少配置项，相反的意思是Unopinionated。 像Spring Boot也是宣称有态度的。 devias-io/react-material-dashboard开发环境依赖 "devDependencies": { "eslint": "5.16.0", "eslint-plugin-prettier": "^3.0.1", "eslint-plugin-react": "^7.12.4", "prettier": "^1.17.1", "prettier-eslint": "^8.8.2", "prettier-eslint-cli": "^4.7.1", "typescript": "^3.5.1" } ESLint包 是代码检测工具，Prettier包 是代码格式化工具。 ESLint既能完成传统的语法检测，也能检查风格是否符合要求。可以用ESLint完成一切工作，也可以结合ESLint完成代码格式化和错误检测。 其他包： ESLint-plugin-React包：ESLint原生支持JSX，但ESLint并不支持React特定的JSX符号，所以要使用ESLint-plugin-React包； prettier-eslint包：prettier-eslint会先调用Prettier完成代码格式化，然后将执行eslint --fix按照配置进行语法修复； prettier-eslint-cli包：prettier-eslint的CLI； eslint-plugin-prettier包：作为ESLint的一个规则运行Prettier。 devias-io/react-material-dashboard 项目没有介绍怎么使用ESLint和Prettier。 如果使用prettier-eslint/prettier-eslint-cli，那就是次序使用Prettier和ESLint；如果使用eslint-plugin-prettier，就是Prettier作为ESLint的插件，在CLI仅仅使用ESLint，而ESLint会调用Prettier。 通过.eslintrc分析，ESLint仅使用了react插件，而没有prettier插件，而且ESLint规则里面也没有prettier，所以其实没有使用eslint-plugin-prettier包。 "plugins": [ "react" ] CLI 上面的开发环境依赖所安装的包共有三个CLI可以使用： .\node_modules\.bin\eslint -h .\node_modules\.bin\prettier -h .\node_modules\.bin\prettier-eslint -h Prettier配置 .

frontend-maven-plugin使用介绍 Spring指南里面有个示例React.js and Spring Data REST ，技术架构为： 后端采用Spring Data Rest 前端采用React.js 构建工具为Maven 下面看一下其pom.xml构建前端的片段: <plugin> <groupId>com.github.eirslett</groupId> <artifactId>frontend-maven-plugin</artifactId> <version>1.6</version> <configuration> <installDirectory>target</installDirectory> </configuration> <executions> <execution> <id>install node and npm</id> <goals> <goal>install-node-and-npm</goal> </goals> <configuration> <nodeVersion>v10.11.0</nodeVersion> <npmVersion>6.4.1</npmVersion> </configuration> </execution> <execution> <id>npm install</id> <goals> <goal>npm</goal> </goals> <configuration> <arguments>install</arguments> </configuration> </execution> <execution> <id>webpack build</id> <goals> <goal>webpack</goal> </goals> </execution> </executions> </plugin> frontend-maven-plugin 用于构建JavaScript部分： install-node-and-npm命令将安装node.js及其包管理工具npm到target目录。 （这确保这些二进制文件不在源代码控制范围内并且能被clean命令清除）。 npm命令将执行使用参数install的npm二进制文件，它会安装定义在package.json内的模块。 webpack命令将执行webpack二进制文件，它会基于webpack.config.js打包所有JavaScript代码。 这些步骤依次运行，完成安装node.js、下载JavaScript模块、构建JS部分。 备选Gradle前端构建插件 frontend-maven-plugin 是专用于Maven的插件，在Gradle上并没有直接对应的插件。 我查找后，重点考察了下面两个插件： Frontend Gradle plugin Gradle Plugin for Node Frontend Gradle plugin实践 代码修改 package.

设置Node.js和NPM 升级Node(n不支持Windows操作系统)： node -v #查看Node版本 npm cache clean -f #清除Node的缓存 npm install -g n #安装n工具，该工具是专门管理Node版本的工具 n stable #安装最新稳定的Node版本 升级NPM： npm -v #查看NPM版本 npm install npm@latest -g #安装最新稳定的NPM版本 我在两台机器上安装了Node 12.16.2 TLS，其中一台机器上npm死活有问题，从Node 10.16版本开始总是报错verbose stack TypeError: Cannot read property 'resolve' of undefined。 最后在那台机器上重新安装了Node 10.15.3,才避免了问题。 安装Chrome插件Vue.js devtools 在vue-devtools github项目页面里找到Chrome插件网址，进行安装。 安装后，在Chrome开发者工具中可以看到Vue Tab并使用。 安装Vue CLI npm install -g @vue/cli 使用Vue CLI创建Vue项目 C:\ws>vue create hello-vue Vue CLI v4.3.1 ? Please pick a preset: default (babel, eslint) Vue CLI v4.

设置Node.js和NPM 升级Node(n不支持Windows操作系统)： node -v #查看Node版本 npm cache clean -f #清除Node的缓存 npm install -g n #安装n工具，该工具是专门管理Node版本的工具 n stable #安装最新稳定的Node版本 升级NPM： npm -v #查看NPM版本 npm install npm@latest -g #安装最新稳定的NPM版本 我在两台机器上安装了Node 12.16.2 TLS，其中一台机器上npm死活有问题，从Node 10.16版本开始总是报错verbose stack TypeError: Cannot read property 'resolve' of undefined。 最后在那台机器上重新安装了Node 10.15.3,才避免了问题。 安装Chrome插件React Developer Tools 从Chrome Extensions上搜索React Developer Tools进行安装。 安装后，在Chrome开发者工具中可以看到React的Components和Profiler两个Tab并使用。 安装脚手架create-react-app npm install -g create-react-app 使用create-react-app创建React项目 C:\devpg>create-react-app hello-react Creating a new React app in C:\devpg\hello-react. Installing packages. This might take a couple of minutes.

资料如下： Side by Side: SAPUI5 vs. React & Angular2 Vue: Comparison with Other Frameworks Angular 2 vs React: The Ultimate Dance Off React vs Angular vs Vue.js — What to choose in 2019? (updated) React.js与Vue.js：流行框架的比较 Reactjs vs. Vuejs React与Vue的对比 关于Vue.js和React.js，听听国外的开发者怎么说？ web前端技术框架选型参考 前端框架及组件库选型分析 前端架构师对于框架的技术选型

在学习某个项目时，.\gradlew build总是遇到error: unmappable character for encoding GBK。至少确定源文件至少会是UTF8的，所以尝试设置文件编码格式来解决这个问题。 一般使用javac编译和java执行程序时，可以使用： javac -encoding UTF-8 Test.java java -Dfile.encoding=UTF-8 Test 对于Gradle项目，可以设置gradlew.bat: set DEFAULT_JVM_OPTS="-Dfile.encoding=UTF-8" 对于IntelliJ Idea，可在配置文件vmoption文件底部添加一行： -Dfile.encoding=UTF-8 经过上述尝试，问题依旧存在，仔细一看错误是发生在javadoc任务阶段，一个java文件注释中包含一个字符“ß”导致这个问题的出现。 在build.gradle文件中添加： javadoc { options.encoding = 'UTF-8' } 搞定！！！

最近需要用JavaScript处理图算法，没找到适合的库，就自己写一套玩玩。 Graph.js 仿照Graph.java写的，实现无向图API。 (function(){ return Graph = (function () { // create empty Graph with V vertices function Graph(V) { this._V = V; this._E = 0; this._adj = []; for(var i=0;i<V;i++) this._adj.push([]); } Object.defineProperty(Graph.prototype, "V", { get: function () { return this._V; }, enumerable: true, configurable: true }); Object.defineProperty(Graph.prototype, "E", { get: function () { return this._E; }, enumerable: true, configurable: true }); // Adds the undirected edge v-w to this graph.

设计了某个OpenUI5控件，当对控件的某些子控件进行设置时，想监控模型的变动。 下面的代码完成了这样的功能： 该控件绑定路径为/someItems/{itemId}/objInfo 当控件下某些子控件修改设置，则路径为/someItems/{itemId}/objInfo的模型属性会发生变动 路径为/someItems/{itemId}/isModified的模型属性将被设置为true (function () { "use strict"; .... var PATH_PART_OBJINFO = "/objInfo"; var PATH_PART_ISMODIFIED = "/isModified"; SomeControl.extend("com.yqu.MySomeControl", { metadata: { properties: {}, publicMethods: [], events: {} }, rb: sap.ui.getCore().getLibraryResourceBundle("com.yqu"), renderer: "SomeControlRenderer", init: function() { .... }, onBeforeRendering: function() { if(SomeControl.prototype.onBeforeRendering) SomeControl.prototype.onBeforeRendering.apply(this, arguments); .... var context = this.getBindingContext(); if (!!context && !!context.oModel && !!context.sPath) { var binding = new sap.ui.model.Binding(context.oModel, "/", context); binding.attachChange($.proxy(this._onDataModified, this)); } }, _onDataModified: function() { var context = this.

在Git Bash中通过gradle bootRun的方式运行Spring Boot程序，使用CTRL+C无法中断运行的程序，重启计算机才能重新运行Spring Boot程序。 忍了很久，最近查了查，发现是Msys2使用的MinTTY终端无法争取地将CTRL+C传递给应用导致的。 CTRL-C doesn’t interrupt the running process #684 CTRL-C doesn’t stop running app in Windows #773 Re: Ctrl-C and non-cygwin programs Unable to use CTRL-C, ’n’ and ‘q’ keyboard commands in Cygwin and Msys2 shells #112 Ctrl+C no longer kills running process in Git Bash 在最后一个帖子中查找到适用于我使用场景的workaround： 通过文件浏览器在Git目录中删除usr\bin\mintty.exe文件 重新运行Git Bash（或在文件浏览器中直接双击git-bash.exe) # 删除mintty前 $ echo $TERM xterm # 删除mintty后 $ echo $TERM cygwin