[譯] 從零開始，在 Redux 中構建時間旅行式調試
- 原文地址：Build time travel debugging in Redux from scratch
- 原文做者：Trey Huffine
- 譯文出自：掘金翻譯計劃
- 本文永久連接：github.com/xitu/gold-m…
- 譯者：老教授
- 校對者：DM.Zhong、da
在這篇教程中，咱們將從零開始一步步構建時間旅行式調試。咱們會先介紹 Redux 的核心特性，及這些特性怎麼讓時間旅行式調試這種強大功能成爲可能。接着咱們會用原生 JavaScript 來構建一個 Redux 核心庫以及實現時間旅行式調試，並將它應用到一個簡單的不含 React 的 HTML 應用裏面去。javascript
使用 Redux 進行時間旅行的基礎
時間旅行式調試指的是讓你的應用程序狀態（state）向前走和向後退的能力，這就使得開發者能夠確切地瞭解應用在其生命週期的每一點上發生了什麼。css
Redux 是使用單向數據流的 flux 模式的一個拓展。Redux 在 flux 的思路體系上額外加入了 3 條準則。html
- 惟一的狀態來源。應用程序的所有狀態都存儲在一個 JavaScript 對象裏面。
- 狀態是隻讀的。這就是不可變的概念了。狀態是永遠不能被修改的，不過每個動做（action）都會產生一個全新的狀態對象，而後用它來替換掉舊的（狀態對象）。
- 由純函數來產生修改。這意味着任什麼時候候生成一個新的狀態，都不會產生其餘的反作用。
Redux 應用程序的狀態是在一個線性的可預測的時間線上生成的，藉助這個概念，時間旅行式調試進一步拓展，將觸發的每個動做（action）所產生的狀態樹都作了一個副本保存下來。前端
UI 界面能夠被當作是 Redux 狀態的一個純函數（譯者注：純函數意味着輸入肯定的 Redux 狀態確定產生肯定的 UI 界面）。時間旅行容許咱們給應用程序狀態設置一個特定的值，從而在那些條件下產生一個準確的 UI 界面。這種應用程序的可視化和透明化的能力對開發者來講是極爲有用的，能夠幫他們透徹地理解應用程序裏面發生了什麼，並顯著地減小調試程序耗費的精力。java
使用 Redux 和時間旅行式調試搭建一個簡單的應用
咱們接下來會搭建一個簡單的 HTML 應用，它會在每次點擊的時候產生一個隨機的背景顏色並使用 Redux 將顏色的 RGB 值存下來。咱們還會創建一個時間旅行拓展，它能夠幫咱們回放應用程序的每個狀態，並讓咱們可視化地看到每一步的背景色變化。android
搭建 Redux 核心庫
若是你對搭建時間旅行式調試感興趣，那我將默認你已熟練掌握 Redux。若是你是 Redux 的新手或者須要對 store 和 reducer 這些概念重溫一下，那建議在接下去的詳細講解前閱讀下這篇文章。在這部分教程中，你將一步步搭建 createStore 和 reducer。ios
Redux 核心庫就是這個 createStore 函數。Redux 的 store 管理着狀態對象（這個狀態對象表明着應用的全局狀態）並暴露出必要的接口供讀取和更新狀態。調用 createStore 會初始化狀態並返回一個包含 getState()、subscribe() 和 dispatch() 等方法的對象。git
createStore 函數接受一個 reducer 函數做爲必要參數，並接受一個 initialState 做爲可選參數。整個 createStore 以下文所示（難以想象的簡短，對吧？）：github
const createStore = (reducer, initialState) => {
const store = {};
store.state = initialState;
store.listeners = [];
store.getState = () => store.state;
store.subscribe = (listener) => {
store.listeners.push(listener);
};
store.dispatch = (action) => {
store.state = reducer(store.state, action);
store.listeners.forEach(listener => listener());
};
return store;
};
複製代碼
實現時間旅行式調試
咱們將對 Redux 的 store 實現一個新的監聽，並拓展 store 的能力，從而實現時間旅行功能。狀態的每一次改變都將被添加到一個數組裏，對於應用狀態的每次改變都會給咱們一個同步表現。爲了清晰起見，咱們將把這個狀態的列表打印到 DOM 節點裏面。redux
首先，咱們會對時間軸和歷史中處於活動態的狀態索引進行初始化（第一、2行）。咱們還會建立一個 savetimeline 函數，它會將當前狀態添加到時間軸數組，將狀態打印到 DOM 節點上，並對程序用來渲染的指定狀態樹的索引進行遞增。爲了確保咱們捕捉到每一次狀態變化，咱們將 saveTimeline 函數做爲 Redux store 的一個監聽者實施訂閱。
const timeline = [];
let activeItem = 0;
const saveTimeline = () => {
timeline.push(store.getState());
timelineNode.innerHTML = timeline
.map(item => JSON.stringify(item))
.join('<br/>');
activeItem = timeline.length - 1;
};
store.subscribe(saveTimeline);
複製代碼
接着咱們在 store 中添加一個新的函數 —— setState。它容許咱們向 Redux 的 store 中注入任何狀態值。當咱們要經過一個 DOM 上的按鈕（下一節建立）在不一樣的狀態間進行穿梭時，這個函數就會被調用。下面就是 store 裏面這個 setState 函數的實現：
// 僅供調試
store.setState = desiredState => {
store.state = desiredState;
// 假設調試器（譯者注：上文的 saveTimeline ）是最後被注入（到 store.listeners ）的，
// 咱們並不想在調試時更新 timeline 中已存儲的狀態，因此咱們把它排除掉。
const applicationListeners = store.listeners.slice(0, -1);
applicationListeners.forEach(listener => listener());
};
複製代碼
謹記，咱們這麼作僅爲了方便學習。僅在此場景下你能夠直接拓展 Redux 的 store 或直接設置狀態。
當咱們在下一節創建好整個應用，咱們也就同時把 DOM 節點給創建好了。如今，你只要知道將會有一個「向前走」和一個「向後走」的按鈕來用來進行時間旅行。這兩個按鈕將更新狀態時間軸的活動索引（從而改變用來展現的活動狀態），容許咱們在不一樣的狀態變化間輕鬆地前進和後退。下面代碼將告訴你怎麼註冊事件監聽來穿梭時間軸：
const previous = document.getElementById('previous');
const next = document.getElementById('next');
previous.addEventListener('click', e => {
e.preventDefault();
e.stopPropagation();
let index = activeItem - 1;
index = index <= 0 ? 0 : index;
activeItem = index;
const desiredState = timeline[index];
store.setState(desiredState);
});
next.addEventListener('click', e => {
e.preventDefault();
e.stopPropagation();
let index = activeItem + 1;
index = index >= timeline.length - 1 ?
timeline.length - 1 : index;
activeItem = index;
const desiredState = timeline[index];
store.setState(desiredState);
});
複製代碼
綜合起來，能夠獲得下面的代碼來建立時間旅行式調試。
const timeline = [];
let activeItem = 0;
const saveTimeline = () => {
timeline.push(store.getState());
timelineNode.innerHTML = timeline
.map(item => JSON.stringify(item))
.join('<br/>');
activeItem = timeline.length - 1;
};
store.subscribe(saveTimeline);
// 僅供調試
// store 不該該像這樣進行拓展。
store.setState = desiredState => {
store.state = desiredState;
// 假設調試器（譯者注：上文的 saveTimeline ）是最後被注入（到 store.listeners ）的，
// 咱們並不想在調試時更新 timeline 中已存儲的狀態，因此咱們把它排除掉。
const applicationListeners = store.listeners.slice(0, -1);
applicationListeners.forEach(listener => listener());
};
// 這裏假定經過這兩個 ID 就能夠拿到向前走、向後走兩個按鈕，用以控制時間旅行
const previous = document.getElementById('previous');
const next = document.getElementById('next');
previous.addEventListener('click', e => {
e.preventDefault();
e.stopPropagation();
let index = activeItem - 1;
index = index <= 0 ? 0 : index;
activeItem = index;
const desiredState = timeline[index];
store.setState(desiredState);
});
next.addEventListener('click', e => {
e.preventDefault();
e.stopPropagation();
let index = activeItem + 1;
index = index >= timeline.length - 1 ? timeline.length - 1 : index;
activeItem = index;
const desiredState = timeline[index];
store.setState(desiredState);
});
複製代碼
搭建一個含時間旅行式調試的應用程序
如今咱們開始建立視覺上的效果來理解時間旅行式調試。咱們在 document 的 body 上添加事件監聽，事件觸發時會建立三個 0-255 間的隨機數，並分別做爲 RGB 值存到 Redux 的 store 裏面。將會有一個 store 的訂閱函數來更新頁面背景色並把當前 RGB 色值展示在屏幕上。另外，咱們的時間旅行式調試會對狀態變化進行訂閱，把每一個變化記錄到時間軸裏。
咱們如下面的代碼來初始化 HTML 文檔並開始咱們的工做。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>My background color is <span id="background"></span></div>
<div id="debugger">
<div>
<button id="previous">
previous
</button>
<button id="next">
next
</button>
</div>
<div id="timeline"></div>
</div>
<style> html, body { width: 100vw; height: 100vh; } #debugger { margin-top: 30px; } </style>
<script> // 應用邏輯將會被添加到這裏…… </script>
</body>
</html>
複製代碼
注意咱們還建立了一個 <div> 用於調試。裏面有用於不一樣狀態間穿梭的按鈕，還有一個用來列舉狀態每一次變化的 DOM 節點。
在 JavaScript 裏，咱們先引用 DOM 節點，引入 createStore。
const textNode = document.getElementById('background');
const timelineNode = document.getElementById('timeline');
const createStore = (reducer, initialState) => {
const store = {};
store.state = initialState;
store.listeners = [];
store.getState = () => store.state;
store.subscribe = listener => {
store.listeners.push(listener);
};
store.dispatch = action => {
console.log('> Action', action);
store.state = reducer(store.state, action);
store.listeners.forEach(listener => listener());
};
return store;
};
複製代碼
接着，咱們建立一個用於跟蹤 RGB 色值變化的 reducer 並初始化 store。初始狀態將是白色背景。
const getInitialState = () => {
return {
r: 255,
g: 255,
b: 255,
};
};
const reducer = (state = getInitialState(), action) => {
switch (action.type) {
case 'SET_RGB':
return {
r: action.payload.r,
g: action.payload.g,
b: action.payload.b,
};
default:
return state;
}
};
const store = createStore(reducer);
複製代碼
如今咱們對 store 添加訂閱函數，用於設置頁面背景色並把文本形式的 RGB 色值添加到 DOM 節點上。這會讓狀態的每個變化均可以在咱們的 UI 界面上表現出來。
const setBackgroundColor = () => {
const state = store.getState();
const { r, g, b } = state;
const rgb = `rgb(${r}, ${g}, ${b})`;
document.body.style.backgroundColor = rgb;
textNode.innerHTML = rgb;
};
store.subscribe(setBackgroundColor);
複製代碼
最後咱們添加一個函數用於生成 0-255 間的隨機數，並加上一個 onClick 的事件監聽，事件觸發時將新的 RGB 值派發（dispatch）到 store 裏面。
const generateRandomColor = () => {
return Math.floor(Math.random() * 255);
};
// 一個簡單的事件用於派發數據變化
document.addEventListener('click', () => {
console.log('----- Previous state', store.getState());
store.dispatch({
type: 'SET_RGB',
payload: {
r: generateRandomColor(),
g: generateRandomColor(),
b: generateRandomColor(),
},
});
console.log('+++++ New state', store.getState());
});
複製代碼
這就是咱們全部的程序邏輯了。咱們將上一節的時間旅行代碼添加到後面，並在 script 標籤的最後面調用 store.dispatch({}) 來產生初始狀態。
下面是應用程序的完整代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>My background color is <span id="background"></span></div>
<div id="debugger">
<div>
<button id="previous">
previous
</button>
<button id="next">
next
</button>
</div>
<div id="timeline"></div>
</div>
<style> html, body { width: 100vw; height: 100vh; } #debugger { margin-top: 30px; } </style>
<script> const textNode = document.getElementById('background'); const timelineNode = document.getElementById('timeline'); const createStore = (reducer, initialState) => { const store = {}; store.state = initialState; store.listeners = []; store.getState = () => store.state; store.subscribe = listener => { store.listeners.push(listener); }; store.dispatch = action => { console.log('> Action', action); store.state = reducer(store.state, action); store.listeners.forEach(listener => listener()); }; return store; }; const getInitialState = () => { return { r: 255, g: 255, b: 255, }; }; const reducer = (state = getInitialState(), action) => { switch (action.type) { case 'SET_RGB': return { r: action.payload.r, g: action.payload.g, b: action.payload.b, }; default: return state; } }; const store = createStore(reducer); const setBackgroundColor = () => { const state = store.getState(); const { r, g, b } = state; const rgb = `rgb(${r}, ${g}, ${b})`; document.body.style.backgroundColor = rgb; textNode.innerHTML = rgb; }; store.subscribe(setBackgroundColor); const generateRandomColor = () => { return Math.floor(Math.random() * 255); }; // 一個簡單的事件用於派發數據變化 document.addEventListener('click', () => { console.log('----- Previous state', store.getState()); store.dispatch({ type: 'SET_RGB', payload: { r: generateRandomColor(), g: generateRandomColor(), b: generateRandomColor(), }, }); console.log('+++++ New state', store.getState()); }); const timeline = []; let activeItem = 0; const saveTimeline = () => { timeline.push(store.getState()); timelineNode.innerHTML = timeline .map(item => JSON.stringify(item)) .join('<br/>'); activeItem = timeline.length - 1; }; store.subscribe(saveTimeline); // 僅供調試 store.setState = desiredState => { store.state = desiredState; // 假設調試器（譯者注：上文的 saveTimeline ）是最後被注入（到 store.listeners ）的， // 咱們並不想在調試時更新 timeline 中已存儲的狀態，因此咱們把它排除掉。 const applicationListeners = store.listeners.slice(0, -1); applicationListeners.forEach(listener => listener()); }; const previous = document.getElementById('previous'); const next = document.getElementById('next'); previous.addEventListener('click', e => { e.preventDefault(); e.stopPropagation(); let index = activeItem - 1; index = index <= 0 ? 0 : index; activeItem = index; const desiredState = timeline[index]; store.setState(desiredState); }); next.addEventListener('click', e => { e.preventDefault(); e.stopPropagation(); let index = activeItem + 1; index = index >= timeline.length - 1 ? timeline.length - 1 : index; activeItem = index; const desiredState = timeline[index]; store.setState(desiredState); }); store.dispatch({}); // 設置初始狀態 </script>
</body>
</html>
複製代碼
總結
咱們的時間旅行式調試的教學示範實現向咱們展示了 Redux 的核心準則。咱們能夠絕不費勁地跟蹤咱們應用程序中不斷變化的狀態，便於調試和了解正在發生的事情。
若是你以爲本文有用，請點擊 ❤。訂閱我 能夠看到更多關於 blockchain、React、Node.js、JavaScript 和開源軟件的文章！你也能夠在 Twitter 或 gitconnected 上找到我。
掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。
- 1. [譯] 從零開始，在 Redux 中構建時間旅行式調試
- 2. 從零開始構建Linux
- 3. 從零開始構建 vue3
- 4. 【React系列】從零開始手寫redux
- 5. 【React系列】從零開始入門Redux
- 6. 【React系列】從零開始實現Redux
- 7. redux從零開始入門筆記
- 8. webpack4從零開始構建(一)
- 9. redux 時間旅行，你值得擁有！
- 10. 6-從零開始學react - redux相關
- 更多相關文章...
- • Lua 調試(Debug) - Lua 教程
- • Eclipse Debug 調試 - Eclipse 教程
- • PHP開發工具
- • TiDB 在摩拜單車在線數據業務的應用和實踐
-
每一个你不满意的现在，都有一个你没有努力的曾经。