詳解Jotai Immer如何實(shí)現(xiàn)undo redo功能示例詳解

更新時(shí)間：2023年04月27日 15:31:16 作者：wesin

這篇文章主要為大家介紹了詳解Jotai Immer如何實(shí)現(xiàn)undo redo功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

背景

之前項(xiàng)目中一直使用redux作為全局狀態(tài)庫使用，然后最近有個(gè)大功能改造，涉及undo、redo等功能影響，小伙伴推薦jotai來替代redux。于是稍事研究了下，對(duì)比redux，果然簡(jiǎn)單了很多，去除了redux里厚重的模板代碼，使用也很方便。所以為啥一開始不直接就jotai呢，還抱著redux啃了半天？反思了下，可能原因是redux名聲更響，當(dāng)年擼flutter、擼ios的時(shí)候就被這個(gè)名詞轟炸了，所以一想到全局狀態(tài)庫，就直接選了它，忽略了前端發(fā)展的日新月異，早就有了更好的替代品，經(jīng)驗(yàn)主義作祟，引以為戒。另一個(gè)原因估計(jì)是論壇里光顧著摸魚沸點(diǎn)了，忽略了介紹jotai的文章。小伙伴又推薦了結(jié)合immer的功能來實(shí)現(xiàn)undo、redo功能。好嘛，翻了翻文檔，immer不就是個(gè)簡(jiǎn)化immutable對(duì)象修改的工具嗎？咋就跟undo、redo搭上關(guān)系了。經(jīng)解釋，方知原來immer高級(jí)篇有produceWithPatches的功能支持對(duì)象的undo以及redo功能。當(dāng)然undo、redo功能我找了找其實(shí)是有現(xiàn)有庫的，只是代碼翻了翻多年沒更新了，下載過來連示例都運(yùn)行不起來，算了，配合以上的jotai、immer功能，貌似直接簡(jiǎn)單擼一個(gè)也不難的樣子，那么就開干吧。

代碼不多，直接上了

import { Patch, applyPatches, produceWithPatches } from "immer";
import { atomWithImmer } from "jotai-immer";
import { atom, createStore } from "jotai/vanilla";
import { JSONSchema7 } from "json-schema";
interface HistoryInfo {
  patch: Patch;
  inverse: Patch;
}
interface HistoryState {
  undo: HistoryInfo[];
  redo: HistoryInfo[];
}
// 業(yè)務(wù)代碼涉及的undo、redo數(shù)據(jù)
export interface HistoryItem {
  businessA: { [key: string]: any };
  businessB: Record<string, JSONSchema7>;
  businessC: any;
}
// 構(gòu)建一個(gè)undo、redo的數(shù)據(jù)起點(diǎn)
const historyItemAtom = atomWithImmer<HistoryItem>({
  businessA: {},
  businessB: {},
  businessC: {},
});
// 觸發(fā)需要保存的undo的一個(gè)操作事件
export const fireHistoryAtom = atom(0.0);
export const businessAAtom = atomWithImmer<{ [key: string]: any }>({});
export const businessBAtom = atomWithImmer<Record<string, JSONSchema7>>({});
export const businessCAtom = atomWithImmer<any>();
export const historyAtom = atomWithImmer<HistoryState>({
  undo: [],
  redo: [],
});
export const store = createStore();
// 頁面數(shù)據(jù)加載完畢寫入初始化history
export const dataInit = () => {
  const newHis: HistoryItem = {
    businessA: store.get(businessAAtom),
    businessB: store.get(businessBAtom),
    businessC: store.get(businessCAtom),
  };
  store.set(historyItemAtom, newHis);
};
// ----------------------------------------------------------------
// atom subscriptions
store.sub(fireHistoryAtom, () => {
  const newHis: HistoryItem = {
    businessA: store.get(businessAAtom),
    businessB: store.get(businessBAtom),
    businessC: store.get(businessCAtom),
  };
  const oldHis = store.get(historyItemAtom);
  const [next, patch, inverse] = produceWithPatches(oldHis, (draft) => {
    draft = newHis;
    return draft;
  });
  store.set(historyItemAtom, next);
  store.set(historyAtom, (draft) => {
    draft.undo.push({
      patch: patch[0],
      inverse: inverse[0],
    });
    draft.redo = [];
  });
});
export const fireHistory = () => {
  setTimeout(() => {
    store.set(fireHistoryAtom, Math.random());
  }, 20);
};
// 執(zhí)行業(yè)務(wù)代碼
const doAction = (item: HistoryItem) => {
  store.set(businessAAtom, (draft) => {
    draft = item.businessA;
    return draft;
  });
  store.set(businessBAtom, (draft) => {
    draft = item.businessB;
    return draft;
  });
  store.set(businessCAtom, (draft) => {
    draft = item.businessC;
    return draft;
  });
  store.set(historyItemAtom, (draft) => {
    draft = item;
    return draft;
  });
};
export const undoAction = () => {
  const history = store.get(historyAtom);
  if (history.undo.length === 0) {
    return;
  }
  const old = history.undo[history.undo.length - 1];
  const currentItem = store.get(historyItemAtom);
  const item = applyPatches(currentItem, [old.inverse]);
  doAction(item);
  store.set(historyAtom, (draft) => {
    const current = draft.undo.pop();
    if (current) {
      draft.redo.push(current);
    }
  });
};
export const redoAction = () => {
  const history = store.get(historyAtom);
  if (history.redo.length === 0) {
    return;
  }
  const old = history.redo[history.redo.length - 1];
  const currentItem = store.get(historyItemAtom);
  const item = applyPatches(currentItem, [old.patch]);
  doAction(item);
  store.set(historyAtom, (draft) => {
    const current = draft.redo.pop();
    if (current) {
      draft.undo.push(current);
    }
  });
};

大致講下思路

定義 HistoryItem 作為undo、redo所需要恢復(fù)的業(yè)務(wù)數(shù)據(jù)，可隨意擴(kuò)展。undo、redo本質(zhì)上就是你點(diǎn)了undo按鈕后你的數(shù)據(jù)需要恢復(fù)到上一個(gè)狀態(tài)。當(dāng)業(yè)務(wù)復(fù)雜了之后，你一次操作可能包含了多個(gè)數(shù)據(jù)的變化，而你undo的操作應(yīng)該是把這些數(shù)據(jù)一起還原。所以把涉及到變化的數(shù)據(jù)都包裝在一起，形成一個(gè)historyitem。通過 immer提供的produceWithPatches生成撤銷和恢復(fù)數(shù)據(jù)，存在 HistoryState 的undo 里，然后你點(diǎn)擊undo按鈕，把數(shù)據(jù)從undo中取出，放入redo中。然后把數(shù)據(jù)狀態(tài)通過jotai全局修改，差不多就完成了。

簡(jiǎn)單的jotai使用是不需要store參與的，這里為了取數(shù)據(jù)、改數(shù)據(jù)方便，所以使用了store的監(jiān)聽和set功能。使用store的代碼也很簡(jiǎn)單，直接在最外層包個(gè)provider即可

<Provider store={mainStore}>
	<MainPage />
</Provider>

使用方式應(yīng)該挺簡(jiǎn)單的吧。當(dāng)你做完需要undo的操作后，調(diào)用fireHistory()函數(shù)即可。頁面的undo、redo按鈕可以直接把事件映射到undoAction、redoAction。至于undo、redo按鈕是否能點(diǎn)的功能可以直接讀取 historyAtom 里面undo、redo的數(shù)組長(zhǎng)度。

以上就是詳解Jotai Immer如何實(shí)現(xiàn)undo redo功能示例詳解的詳細(xì)內(nèi)容，更多關(guān)于Jotai Immer實(shí)現(xiàn)undo redo的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: