feat/zustand store#398
Conversation
# Conflicts: # src/app/App.tsx # src/app/components/Editor.tsx # src/app/components/WarningBox.tsx # src/app/components/WarningModal.tsx # src/app/components/YamlModal.tsx # src/app/components/YamlPreview.tsx
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
react-redux must be removed as dep.
| renderListItem={renderListItem as RenderItemProp<Language>} //wa for tsc | ||
| renderTagValue={renderTagValue} | ||
| value={publiccodeYmlLanguages as Language[]} | ||
| value={languages as unknown as Language[]} |
There was a problem hiding this comment.
this cast is not correct. languages is an array of string. despite of this, it's forced to be an array of Language.
There was a problem hiding this comment.
In fact, we don't need to cast here. Removing the cast
| const publiccodeYmlLanguages = useSelector(getPubliccodeYmlLanguages) | ||
|
|
||
| const handleChange = (newSelection: Language[]) => { | ||
| if (newSelection.length != 0) { |
There was a problem hiding this comment.
newSelection.length != 0 is equivalent to newSelection.length. prefer a shorter form.
| const { warnings, setWarnings } = props; | ||
| const { warnings } = useWarningStore(); | ||
|
|
||
| const [collapseElementOpen, setCollapseElementOpen] = useState(""); |
There was a problem hiding this comment.
Does it make sense to move this state into the store?
There was a problem hiding this comment.
Everything related to a component's behavior is better handled using useState hooks. In this case, since the hook manages the collapsing behavior, it's preferable to use a state hook.
| const YamlPreview = ({ yaml }: Props): JSX.Element => { | ||
| const YamlPreview = (): JSX.Element => { | ||
| const { t } = useTranslation(); | ||
| const [showUploadPanel, setShowUploadPanel] = useState(false); |
There was a problem hiding this comment.
Does it make sense to move this status to the store?
There was a problem hiding this comment.
Everything related to a component's behavior is better handled using useState hooks. In this case, since the hook manages the show/hide panel behavior, it's preferable to use a state hook.
3 participants
✅ What’s been done
This PR refactors how the app handles state by introducing Zustand, a lightweight, scalable state management library for React.
Previously, state was managed in a more scattered way. Now, we've created clear, dedicated stores that improve modularity and make the app easier to maintain.
✨ Features
We now use three separate Zustand stores, each focused on a specific part of the app:
useYamlStoreresetYaml()method.persistto store only selected values (isPublicCodeImported,publiccodeYmlVersion) across sessions.useLanguagesStoreresetLanguages()function.useWarningStoreWarning[]).persistto retain them on reload.💥 Breaking changes
No breaking changes introduced.
This is a refactor only, no business logic or UI behavior has been altered.