@@ -51,7 +51,7 @@ The files and directories in `src` are strictly organized into standard director
5151 ```
5252 - components
5353 - Schedule
54- - index.jsx // Manages state, loades data from the API
54+ - index.jsx // Manages state, loads data from the API
5555 - Schedule.jsx // A pure React component that renders a Schedule
5656 - Schedule.less // styles used by Schedule.jsx
5757 ```
@@ -71,9 +71,13 @@ This project is based on React.
7171
7272Where state management is needed, [ zustand] ( https://github.com/pmndrs/zustand ) is used. It was added to this app in 2023, so legacy code uses Context.
7373
74- Zustand usage in this app follows a particular pattern:
74+ Zustand is an unopinionated framework, but this project has opinions.
7575
76- A store must be created in a file called \* Store.ts and exported. Ad-hoc stores shouln't be created in components.
76+ - Stores should be structured and separate from rendering components
77+ - Stores should use Immer for easier immutability
78+ - Zustand does not natively support computeds, so we have a separate hook co-located with the store
79+
80+ A store must be created in a file called \* Store.ts and exported as the default export. Ad-hoc stores shouldn't be created in components.
7781
7882``` typescript
7983import create from ' zustand' ;
@@ -128,7 +132,7 @@ This template above demonstrates how to structure a Zustand store with Immer for
128132
129133Key Features:
130134• State and Actions: Define state and behavior in the same store.
131- • Computed State: Use a dedicated custotm hook (useStoreComputeds) to derive and expose computed values from the store within the same file.
135+ • Computed State: Use a dedicated custom hook (useStoreComputeds) to derive and expose computed values from the store within the same file.
132136
133137### LESS
134138
0 commit comments