Skip to content

【イベント】【間取り編集】【リファクタ】エディタ用のStateを状態管理ライブラリで管理できるようにする #257

@atomisu0312

Description

@atomisu0312

Which feature would you like to see added or improve
【イベント】

Describe the solution you'd like
間取り編集エディタにおいては、ピクセルやテキストボックスをはじめとして様々なStateが使われている。
現状、それらはpropsを通してコンポーネント間でやりとりされており可読性に欠けているのが現状である。
また、setStateが散発的に使用されているせいで、どういう状況でどのようにstateが更新されるのかを把握しづらい。
今後、機能拡張をする際に技術負債になりえることは容易に想像できる。

この問題の解決のために、状態管理用のライブラリを検討したい。
状態管理ライブラリを用意することのメリットは以下の通りである。

  • propsを通したStateのやりとりを一掃できる
  • setStateで書かれている部分の一元化

ライブラリについて
以下の3択に絞れる。

  • Zustand: 近年Star数が伸びてきており、Reduxをもう少し使いやすくした感がある。
  • Jotai: 上記2つとは経路が異なるライブラリ(atomというのがコンセプトになっている)
  • Redux: 由緒正しきライブラリ、GitHubのstar数は最多

参考:
https://risingstars.js.org/2024/ja#section-statemanagement
https://bestofjs.org/projects?tags=state

注意:本チケットでリファクタするのはstateに振る舞いだけとし、canvasとstateとの同期部については絶対に編集しないようにする。

TODO

Which directory to change

  • front/package.json
  • front/src/component(event/venueeditに関連する部分)
  • front/src/hooks/event/venueedit
  • front/src/stores/event/venueedit

Describe alternatives you've considered
他のライブラリも選択肢に候補にあがりうる。

Additional context
Zustandの紹介的な記事:
https://envader.plus/article/524

Sub-issues

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions