[ 一起學React系列 -- 7 ] 秘術之時間旅行-2

nidaye 發(fā)布于2019-08-23 12:20 / 1423人閱讀

摘要：但這樣做的缺點很多，不利于狀態(tài)在組件之間共享。所以本篇使用作為狀態(tài)管理器來實現(xiàn)時間旅行。并且從中可以看出過程不僅僅向對象中添加一個狀態(tài)對象，還對進行了加一操作，這是為了保證狀態(tài)與保持同步。

距離上一次更新已經(jīng)有半個月了，這半個月來主要在忙兩件事：一個是最近老板給了個自動化測試任務，另一個是和學校的弟弟一起搞一個微信小游戲...emmmm！其實主要是懶！！！

本篇是作為上篇的續(xù)集，不知道看過上篇的小伙伴對筆者改造過的時間旅行實現(xiàn)方案有沒有什么意見或者建議！當然本篇仍然搞時間旅行、仍然使用上篇的實現(xiàn)方案，還是原來的味道！！！
不過上篇實現(xiàn)時間旅行的狀態(tài)管理方案是...額，沒有任何方案，只是由組件自己管理的。但這樣做的缺點很多，不利于狀態(tài)在組件之間共享。畢竟只能自己玩的組件不是好組件。所以本篇使用Redux作為狀態(tài)管理器來實現(xiàn)時間旅行。
具體的時間旅行實現(xiàn)方案和代碼已經(jīng)在上篇提供了，所以本篇著眼于基于Redux實現(xiàn)時間旅行過程中需要注意的點。

基于Redux的時間旅行解決方案 在React中使用Redux

此處省略1萬字...因為這種教程簡直多得不行，如果再糾結可能就多余了！

Redux之狀態(tài)對象

因為實現(xiàn)方案不變，所以保存在Redux中的狀態(tài)對象仍然是狀態(tài)位置currentIndex和狀態(tài)集list。

Redux之Action

對上一篇有過了解的朋友知道在整個過程中主要涉及到三個操作：添加、撤銷、返回，當然真實情況下肯定還有別的操作不過此地不做更多討論，萬變不離其宗。所以對于的Action應該有三個

export function Add(list) {
    return {
        type: ADD,
        payload: {"list": list}
    }
}

export function Undo() {
    return {
        type: UNDO,
    }
}

export function Redo() {
    return {
        type: REDO,
    }
}

對于同一功能的Action，我們使用type作為區(qū)分標志，因此就有ADD(添加)、UNDO(撤銷)、REDO(返回)。因為添加涉及到狀態(tài)對象所以action的payload為所需要添加的狀態(tài)對象、撤銷和返回控制currentIndex的加減，所以只需要確定type然后具體的加減操作在Reducer中完成。

Redux之Reducer

先看Reducer代碼：

export default function TravelReducer(state = {}, action) {
    switch (action.type) {
        case ADD:
            let payloadContent = action.payload["list"];
            let archive = state["list"].slice();
            let currentIndex_ADD = state["currentIndex"];
            archive.push(payloadContent);
            return {...state, ...{"list": archive, "currentIndex": currentIndex_ADD + 1}};
        case UNDO:
            let currentIndex_UNDO = state["currentIndex"];
            return {...state, ...{"currentIndex": currentIndex_UNDO - 1}};
        case REDO:
            let currentIndex_REDO = state["currentIndex"];
            return {...state, ...{"currentIndex": currentIndex_REDO + 1}};
        default:
            return state
    }
}

Reducer處理的type要與Action的type相對應。并且從中可以看出ADD過程不僅僅向list對象中添加一個狀態(tài)對象，還對currentIndex進行了加一操作，這是為了保證current狀態(tài)與currentIndex保持同步。而UNDO與REDO就相對比較簡單，僅僅是加一或者減一操作，目的也是保證current狀態(tài)與currentIndex保持同步。

以上就是本次更新的主要內(nèi)容，篇幅比較小，主要是對上一篇的補充和擴展。在這再給一下實例代碼的地址，有興趣的朋友可以下載下來本地運行、學習。

GPU云服務器云服務器一起學linux 和一起學python 跟孩子一起學python 與孩子一起學python

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98348.html

[ 一起學React系列 -- 6 ] 秘術之時間旅行-1

摘要：所謂的時間旅行從廣義上來說無非就是三個動作回到過去進入未來回到現(xiàn)在，這個無論是從現(xiàn)實還是前端技術來說都是可靠的。單從技術棧來說，時間旅行不是一門技術而是一個思想套路。標題看起來挺新穎的，筆者都覺得很高大上是不是哈哈... 拋轉時間旅行在生活中是一個非常吸引人的概念，雖然現(xiàn)在無法實現(xiàn)但說不定未來的某天就實現(xiàn)了！然后就穿梭會過去殺掉小時候的自己然后就開始懵逼自己是誰類似的狗血劇情......

付倫 2019-08-23 12:11 評論0 收藏0
寫給初入門/半路出家的前端er

摘要：半路出家的前端程序員應該不在少數(shù)，我也是其中之一。年，馮馮同事兼師兄看我寫太費勁，跟我說對面樓在找，問我要不要學，說出來可能有點丟人，但是在那之前，我真得不知道什么是，什么是。半路出家的前端程序員應該不在少數(shù)，我也是其中之一。為何會走向前端非計算機專業(yè)的我，畢業(yè)之后，就職于一家電力行業(yè)公司，做過設備調試、部門助理、測試，也寫過一段時間的QT，那三年的時間，最難過的不是工作忙不忙，...

Cc_2011 2019-08-23 17:18 評論0 收藏0
分享國外Python大咖如何在5個月內(nèi)找到一份薪水翻番的工作的？

摘要：六個月前，我辭掉了初級開發(fā)者的工作，并去東南亞旅行了五個月。我的目標了解更多資料我原本計劃去東南亞旅行個月，我也有信心在旅行回來后能夠找到一份更好的工作。申請工作我下一站旅行地是老撾境內(nèi)一個偏遠的攀爬區(qū)。金三銀四，謹以此文獻給所有正在準備跳槽的你。 showImg(https://segmentfault.com/img/bVbhXVQ?w=640&h=640);六個月前，我辭掉了初...

Anleb 2019-07-31 11:12 評論0 收藏0
[ 一起學React系列 -- 2 ] UI的靈魂--State

摘要：首先賣個關子，下面我們一起來復習下小學還是初中的一枚數(shù)學知識。一旦更改了，會觸發(fā)組件的重新渲染。為了頁面渲染性能的考慮，有助于在中進行比較并確定是否重新渲染。概念引入對于React來說, 沒有State就沒有頁面的渲染, 我們也將什么都看不到咋一聽怎么那么唬人？不過的確是這樣，正如標題所言State是UI的靈魂。我們都知道React的核心思想之一是組件化，將頁面所展示的東西按一定...

XBaron 2019-08-23 11:43 評論0 收藏0
[ 一起學React系列 -- 0 ] React技術棧學習路線

摘要：的出現(xiàn)真可謂是前端界的福音，正與之宗旨所說，。據(jù)統(tǒng)計，目前世界上有的項目使用了。技術棧學習路線直到前段時間筆者的朋友給推薦了一個，真是欣喜若狂也更加堅定了自己在繼續(xù)前進的想法。這是一個外國友人總結的一套技術棧學習路線，先給傳送門。我相信點進來的同學都是沖著標題來的，當然本文也不會讓各位失望。不過在正式介紹標題所述的內(nèi)容之前，我們不妨先放下技術，一起回顧下自己做前端技術的心路歷程。前...

Java3y 2019-08-26 12:16 評論0 收藏0