Commit b9b6c0c

author

kenberkeley

committed

add js/html syntax highlight

1 parent ce679fd commit b9b6c0cCopy full SHA for b9b6c0c

File tree

2 files changed

+15

-15

lines changed

middleware-onion-model.md
redux-advanced-tutorial.md

2 files changed

+15

-15

lines changed

`‎middleware-onion-model.md‎`

Lines changed: 2 additions & 2 deletions

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`
`7`	`7`	`## § Express 的中间件`
`8`	`8`
`9`		-```
	`9`	+```js
`10`	`10`	`/ app.js /`
`11`	`11`	`var express = require('express')`
`12`	`12`	`var app = express()`
`@@ -81,7 +81,7 @@ B middleware1 结束`
`81`	`81`
`82`	`82`	`## § Redux 的中间件[(在线演示)](http://jsbin.com/pazica/edit?html,console)`
`83`	`83`
`84`		-```
	`84`	+```html
`85`	`85`	`<!DOCTYPE html>`
`86`	`86`	`<html>`
`87`	`87`	`<head>`

`‎redux-advanced-tutorial.md‎`

Lines changed: 13 additions & 13 deletions

Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@`
`26`	`26`
`27`	`27`	`### ⊙ 源码分析`
`28`	`28`
`29`		-```
	`29`	+```js
`30`	`30`	`/**`
`31`	`31`	`* 看起来逼格很高,实际运用其实是这样子的:`
`32`	`32`	`* compose(f, g, h)(...arg) => f(g(h(...args)))`
`@@ -54,7 +54,7 @@ export default function compose(...funcs) {`
`54`	`54`
`55`	`55`	这里的关键点在于,`reduceRight` 可传入初始值。由于 `reduce / reduceRight` 仅仅是方向的不同,因此下面用 `reduce` 说明即可:
`56`	`56`
`57`		-```
	`57`	+```js
`58`	`58`	`var arr = [1, 2, 3, 4, 5]`
`59`	`59`
`60`	`60`	`var re1 = arr.reduce(function(total, i) {`
`@@ -71,7 +71,7 @@ console.log(re2) // 115`
`71`	`71`	`## § Redux API · [createStore(reducer, [initialState])][createStore]`
`72`	`72`	`### ⊙ 源码分析`
`73`	`73`
`74`		-```
	`74`	+```js
`75`	`75`	`import isPlainObject from 'lodash/isPlainObject'`
`76`	`76`	`import $$observable from 'symbol-observable'`
`77`	`77`
`@@ -332,7 +332,7 @@ reducers/`
`332`	`332`	`├── todosReducer.js`
`333`	`333`	```
`334`	`334`
`335`		-```
	`335`	+```js
`336`	`336`	`/ 本代码块记为 code-9 /`
`337`	`337`	`/* reducers/index.js */`
`338`	`338`	`import { combineReducers } from 'redux'`
`@@ -410,7 +410,7 @@ reducers/`
`410`	`410`	`├── todoListReducer.js`
`411`	`411`	```
`412`	`412`
`413`		-```
	`413`	+```js
`414`	`414`	`/* reducers/index.js */`
`415`	`415`	`import { combineReducers } from 'redux'`
`416`	`416`	`import counterReducer from './counterReducer'`
`@@ -478,7 +478,7 @@ rootReducer(state, action) —→∑ ↗ optTimeReducer(optTime, action) ---`
`478`	`478`	`### ⊙ 源码分析`
`479`	`479`	`> 仅截取关键部分,毕竟有很大一部分都是类型检测警告`
`480`	`480`
`481`		-```
	`481`	+```js
`482`	`482`	`function combineReducers(reducers) {`
`483`	`483`	`var reducerKeys = Object.keys(reducers)`
`484`	`484`	`var finalReducers = {}`
`@@ -518,7 +518,7 @@ function combineReducers(reducers) {`
`518`	`518`
`519`	`519`	`### ⊙ 源码分析`
`520`	`520`
`521`		-```
	`521`	+```js
`522`	`522`	`/* 为 Action Creator 加装上自动 dispatch 技能 */`
`523`	`523`	`function bindActionCreator(actionCreator, dispatch) {`
`524`	`524`	`return (...args) => dispatch(actionCreator(...args))`
`@@ -591,7 +591,7 @@ $('#btn').on('click', function() {`
`591`	`591`	`诸如统一的日志记录、引入 thunk 统一处理异步 Action Creator 等都属于中间件`
`592`	`592`	下面是一个简单的打印动作前后 `state` 的中间件:
`593`	`593`
`594`		-```
	`594`	+```js
`595`	`595`	`/* 装逼写法 */`
`596`	`596`	`const printStateMiddleware = ({ getState }) => next => action => {`
`597`	`597`	`console.log('state before dispatch', getState())`
`@@ -625,7 +625,7 @@ function printStateMiddleware(middlewareAPI) { // 记为【锚点-1】,中间`
`625`	`625`	说白了,Store 增强器就是对生成的 `store` API 进行改造,这是它与中间件最大的区别(中间件不修改 `store` 的 API)
`626`	`626`	而改造 `store` 的 API 就要从它的缔造者 `createStore` 入手。例如,Redux 的 API `applyMiddleware` 就是一个 Store 增强器:
`627`	`627`
`628`		-```
	`628`	+```js
`629`	`629`	`import compose from './compose' // 这货的作用其实就是 compose(f, g, h)(action) => f(g(h(action)))`
`630`	`630`
`631`	`631`	`/* 传入一坨中间件 */`
`@@ -668,7 +668,7 @@ export default function applyMiddleware(...middlewares) {`
`668`	`668`	最终返回的虽然还是 `store` 的那四个 API,但其中的 `dispatch` 函数的功能被增强了,这就是所谓的 Store Enhancer
`669`	`669`
`670`	`670`	`### ⊙ 综合应用 ( [在线演示][jsbin] )`
`671`		-```
	`671`	+```html
`672`	`672`	`<!DOCTYPE html>`
`673`	`673`	`<html>`
`674`	`674`	`<head>`
`@@ -723,7 +723,7 @@ store.dispatch(dec());`
`723`	`723`
`724`	`724`	实际上,上面生成 `store` 的代码还可以更加优雅:
`725`	`725`
`726`		-```
	`726`	+```js
`727`	`727`	`/ 本代码块记为 code-10 /`
`728`	`728`	`var store = Redux.createStore(`
`729`	`729`	`reducer,`
`@@ -735,7 +735,7 @@ var store = Redux.createStore(`
`735`	`735`
`736`	`736`	> 重温一下 `createStore` 完整的函数签名:`function createStore(reducer, preloadedState, enhancer)`
`737`	`737`
`738`		-```
	`738`	+```js
`739`	`739`	`/ 本代码块记为 code-11 /`
`740`	`740`	`import { createStore, applyMiddleware, compose } from 'redux'`
`741`	`741`
`@@ -757,7 +757,7 @@ const store = createStore(`
`757`	`757`
`758`	`758`	在 `createStore` 的源码分析的开头部分,我省略了一些代码,现在奉上关键部分:
`759`	`759`
`760`		-```
	`760`	+```js
`761`	`761`	`/ 本代码块记为 code-12 /`
`762`	`762`	`if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {`
`763`	`763`	`// 这里就是上面 code-10 的情况,只传入 reducer 和 Store Enhancer 这两个参数`

0 commit comments

Comments

(0)

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Commit b9b6c0c

File tree

2 files changed

2 files changed

`‎middleware-onion-model.md‎`

`‎redux-advanced-tutorial.md‎`

0 commit comments