JS neo4j-browser 初始化时运行命令的逻辑分析

更新于 2020-02-11写于 2019-10-26前端JavaScript

背景

最近需要改点 neo4j-browser 的代码做个 demo，分析初始化时运行命令的代码时花了很多时间，记录一下。

目的

找出 dispatch SINGLE_COMMAND_QUEUED action 的地方。

PS: 要是会 redux-observable, Redux, RxJS 这哥三的话应该一下就能找到了。。

分析

首先通过读 neo4j-browser 的源码知道了发出命令都是通过：

Redux dispatch action
redux-observable 将 action 流入 RxJS
RxJS 处理
redux-observable 处理 RxJS 流出的 action (s)

实现的。

所以我们可以在SINGLE_COMMAND_QUEUED的mergeMap里截胡一下看看，发现调用栈只有两个地方有自己的代码（其余的都是 node_modules 中的）。

src/shared/modules/commands/commandsDuck.js:214

 1export const handleSingleCommandEpic = (action$, store) =>
 2  action$
 3    .ofType(SINGLE_COMMAND_QUEUED)
 4    .merge(action$.ofType(SYSTEM_COMMAND_QUEUED))
 5    .map(action =>
 6      buildCommandObject(action, helper.interpret, getCmdChar(store.getState()))
 7    )
 8    .mergeMap(({ action, interpreted, cmdchar }) => {
 9      // 这里截胡
10      /*
11        调用栈：
12        (anonymous) (commandsDuck.js:214)
13        ...别人的代码
14        ./src/browser/AppInit.jsx
15      */
16      debugger;
17      return new Promise((resolve, reject) => {
18        const noop = { type: 'NOOP' }
19        if (!(action.cmd || '').trim().length) {
20          resolve(noop)
21          return
22        }
23        if (interpreted.name !== 'cypher') {
24          action.cmd = cleanCommand(action.cmd)
25        }
26        const res = interpreted.exec(action, cmdchar, store.dispatch, store)
27        if (!res || !res.then) {
28          resolve(noop)
29        } else {
30          res
31            .then(r => {
32              store.dispatch(fetchMetaData())
33              resolve(noop)
34            })
35            .catch(e => resolve(noop))
36        }
37      })
38    })

可惜AppInit.js这里并没有直接 dispatch SINGLE_COMMAND_QUEUED 这个 action。

src/browser/AppInit.js:87

1// Signal app upstart (for epics)
2store.dispatch({ type: APP_START, url: window.location.href, env })

继续找找发现在STARTUP_CONNECTION_SUCCESS这个 action dispatch 后会有一系列列操作，SINGLE_COMMAND_QUEUED 这个 action 在程序初始化时就作为 RxJS 的 mapTo 操作符的参数保存起来了，然后在STARTUP_CONNECTION_SUCCESS dispatch 后由 RxJS 流出，然后经过 redux-observable 进行 dispatch 的。这些操作都是通过调用 node_modules 中的函数（redux-observable、RxJS）完成的。

src/shared/modules/connections/connectionsDuck.js:398

 1export const startupConnectionSuccessEpic = (action$, store) => {
 2  return action$
 3    .ofType(STARTUP_CONNECTION_SUCCESS)
 4    .do(() =>
 5      store.dispatch(
 6        executeSystemCommand(getCmdChar(store.getState()) + 'server status')
 7      )
 8    )
 9    .mapTo(
10      // 这行在创建 epic 就执行了，创建出的 action 已经通过 redux-observable 保存在 rxjs 的 Subscribe 中。
11      // 所以截胡的结果除了src/browser/AppInit.js:87，别的全是调用的 rxjs 等模块的函数
12      executeSystemCommand(getInitCmd(store.getState()))
13    ) // execute initCmd from settings
14}