Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to use Immutable.js to realize undo and redo function

2025-01-18 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use Immutable.js to achieve undo redo function related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that after reading this article on how to use Immutable.js to achieve undo redo function will have something to gain, let's take a look.

Step 1: determine which states require history and create a custom State class

Not all states require historical records. Many states are very trivial, especially those related to mouse or keyboard interaction. For example, when dragging a graphic in a drawing tool, we need to set a "drag and drop" tag. The page will display the corresponding drag prompt according to this tag. Obviously, the drag tag should not appear in the history. Other states cannot be undone or need not be undone, such as the size of the web window, the list of requests sent to the background, and so on.

Excluding states that do not require history, we encapsulate the remaining states in Immutable Record and define the State class:

/ / State.ts

Import {Record, List, Set} from 'immutable'

Const StateRecord = Record ({

Items: List

Transform: d3.ZoomTransform

Selection: number

})

/ / use class encapsulation to make it easy to write TypeScript. Note that it is best to use a version above Immutable 4.0 here.

Export default class State extends StateRecord {}

Our example here is a simple online drawing tool, so the above State class contains three fields, items is used to record the drawing, transform is used to record the panning and zooming status of the artboard, and selection represents the ID of the currently selected drawing. Other states in the drawing tool, such as drawing preview, auto-alignment configuration, action prompt text, etc., are not placed in the State class.

Step 2: define the Action base class and create a corresponding Action subclass for each different operation

Unlike redux-undo, we still use the command mode: define the base class Action, where all operations on State are encapsulated as an instance of Action, and define several subclasses of Action that correspond to different types of operations.

In TypeScript, it is convenient to use Abstract Class to define the Action base class.

/ / actions/index.ts

Export default abstract class Action {

Abstract next (state: State): State

Abstract prev (state: State): State

Prepare (appHistory: AppHistory): AppHistory {return appHistory}

GetMessage () {return this.constructor.name}

}

The next method of the Action object is used to calculate the next state, and the prev method is used to calculate the previous state. The getMessage method is used to get a short description of the Action object. Through the getMessage method, we can display the user's action record on the page, making it easier for the user to understand what has happened recently. The prepare method is used to "prepare" Action before it is applied for the first time, and the definition of AppHistory is given later in this article.

Example of Action subclass

The following AddItemAction is a typical Action subclass that expresses "add a new graphic".

/ / actions/AddItemAction.ts

Export default class AddItemAction extends Action {

NewItem: Item

PrevSelection: number

Constructor (newItem: Item) {

Super ()

This.newItem = newItem

}

Prepare (history: AppHistory) {

/ / A new drawing is automatically selected after it is created, in order to change the state.selection to the original value when the operation is undone

/ / the value of selection before adding graphics is read in the / / prepare method and saved to this.prevSelection

This.prevSelection = history.state.selection

Return history

}

Next (state: State) {

Return state

.setIn (['items', this.newItem.id], this.newItem)

.set ('selection', this.newItemId)

}

Prev (state: State) {

Return state

.deleteIn (['items', this.newItem.id])

.set ('selection', this.prevSelection)

}

GetMessage () {return-- Add item ${this.newItem.id}--

}

Runtime behavior

When the application is running, the user interaction generates an Action stream. Each time an Action object is generated, we call the next method of the object to calculate the latter state, and then save the action to a list for later use. When the user performs the undo operation, we retrieve the most recent Action from the action list and call its prev method. When the application runs, the next/prev method is called roughly as follows:

/ / initState is the initial state of the application given at the beginning

/ / at some point, user interaction produces action1.

State1 = action1.next (initState)

/ / another moment, user interaction produces action2.

State2 = action2.next (state1)

/ / similarly, action3 also appeared.

State3 = action3.next (state2)

/ / when the user undoes, we need to call the prev method of the most recent action

State4 = action3.prev (state3)

/ / if you undo it again, we take the corresponding action from the action list and call its prev method

State5 = action2.prev (state4)

/ / when redoing, take out the most recent undone action and call its next method

State6 = action2.next (state5)

Applied-Action

For the convenience of the following explanation, we have a simple definition of Applied-Action: Applied-Action refers to those action; whose operation results have been reflected in the current application state. When the next method of action is executed, the action becomes applied;. When the prev method is executed, the action becomes unapplied.

This is the end of the article on "how to undo redo function with Immutable.js". Thank you for reading! I believe that everyone has a certain understanding of "how to use Immutable.js to achieve undo redo function" knowledge, if you want to learn more knowledge, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report