Skip to content

Commit

Permalink
doc: update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
went2 committed Jan 24, 2024
1 parent 7081cb3 commit 1044f9d
Showing 1 changed file with 6 additions and 7 deletions.
13 changes: 6 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@ A pixel editor allows you to edit pixel icon and export.

demo: [pixel-me](https://pixel-me.netlify.app/)

The original idea and code structure is bought from [Eloquent JavaScript Chapter 19](https://eloquentjavascript.net/19_paint.html).
The idea and code structure originates from [Eloquent JavaScript Chapter 19](https://eloquentjavascript.net/19_paint.html).

I converted the code into TypeScript and expanded somehow in order to explore how to draw pixel in HTML canvas and how to manage states in vanilla way.
I converted the code into TypeScript and add some features in order to explore how to draw pixel in HTML canvas as well as manage states without any library.

It turns out the way to manage states in vanilla JavaScript(TypeScript) is quite "Reduxful" in which component dispatches actions, and reducer function caculates the latest state and notifies every component to sync the state(by calling component's syncState()). Component decides whether and how to update its own state when got notifies.
It turns out the way to manage states in JavaScript is quite "Reduxful" in which component dispatches actions, and reducer function caculates the latest state and notifies all components to sync the state. Component decides whether and how to update its own state and render when got notifies.

The core elements of the way consists of:
The approach consists of:

1. A state object of the whole App
2. State object and dispatch function are passed down to each component. When component's state changes, it dispatches actions instead of handle events by itself. Eg.
2. A dispatch function which passes down to every component. When component's state changes, it dispatches actions instead of handle events by itself. Eg.

```ts
class UndoButton implements UIComponent {
Expand All @@ -39,5 +39,4 @@ class UndoButton implements UIComponent {
}
```

3. A reducer function(can be splitted into several) to caculate and return the newest state object based on the current object and action object.
4. App component notifys every component to sync their state each time the reducer returns the newest state.
3. A reducer function(can be splitted into several) to caculate and return the newest state object based on the current object and action object.

0 comments on commit 1044f9d

Please sign in to comment.