Published Apr 22, 2022
[
Imagine you are using some drawing application, you choose the paint brush to draw. Now the brush changes its behavior based on the selected color i.e. if you have chosen red color it will draw in red, if blue then it will be in blue etc.
It lets you change the behavior of a class when the state changes.
The state pattern is a behavioral software design pattern that implements a state machine in an object-oriented way. With the state pattern, a state machine is implemented by implementing each individual state as a derived class of the state pattern interface, and implementing state transitions by invoking methods defined by the pattern’s superclass. The state pattern can be interpreted as a strategy pattern which is able to switch the current strategy through invocations of methods defined in the pattern’s interface.
Let’s take an example of text editor, it lets you change the state of text that is typed i.e. if you have selected bold, it starts writing in bold, if italic then in italics etc.
First of all we have our state interface and some state implementations
interface WritingState {
write(words: string);
}
class UpperCase implements WritingState {
write(words: string) {
console.log(words.toUpperCase())
}
}
class LowerCase implements WritingState {
write(words: string) {
console.log(words.toUpperCase())
}
}
class DefaultText implements WritingState {
write(words: string) {
console.log('default')
}
}
Then we have our editor
// editor
class TextEditor {
protected state;
constructor(state: WritingState) {
this.state = state
}
setState(state: WritingState) {
this.state = state
}
type(words: string) {
this.state.write(words)
}
}
And then it can be used as
test('test state pattern', () => {
const editor = new TextEditor(new DefaultText());
editor.type('first line')
editor.setState(new UpperCase())
editor.type('second line')
editor.type('third line')
editor.setState(new LowerCase())
editor.type('Fourth line')
editor.type('Fifth line')
})