-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
docs: explain Types global namespace #292
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -121,6 +121,7 @@ I highly recommend to add a bounty to the issue that you're waiting for to incre | |
| - [Redux](#redux) | ||
| - [Store Configuration](#store-configuration) | ||
| - [Create Global Store Types](#create-global-store-types) | ||
| - [Types Global Namespace](#types-global-namespace) | ||
| - [Create Store](#create-store) | ||
| - [Action Creators 🌟](#action-creators-) | ||
| - [Reducers](#reducers) | ||
|
|
@@ -1311,6 +1312,32 @@ declare module 'typesafe-actions' { | |
|
|
||
| ``` | ||
|
|
||
| ### Types Global Namespace | ||
|
|
||
| The playground uses a project-wide ambient module named `MyTypes` as a single import point for cross-cutting application types. It is a type-only module: it does not create runtime code, and it is not a package that needs to exist in `node_modules`. | ||
|
|
||
| Each application area extends this module from the place that owns the type. The store owns `RootState`, `RootAction`, and `Store`, so those declarations live next to the store setup. The services layer owns the `Services` dependency container used by epics, so it adds that type from the services folder: | ||
|
|
||
| ```tsx | ||
| declare module 'MyTypes' { | ||
| export type Services = typeof import('./index').default; | ||
| } | ||
|
|
||
| ``` | ||
|
|
||
| The store declaration also augments `typesafe-actions` with the same `RootAction` through its `Types` interface. That lets helpers from `typesafe-actions` understand the app's root action union without each feature re-declaring it. | ||
|
|
||
| This keeps the dependency direction simple. Feature modules export their own action, state, selector, and service types. The root store or service barrel composes those exports into application-wide types, and consumers import only the stable names they need. This section uses named imports for root-level aliases; the guide's existing namespace-style examples remain useful when grouped access to the ambient module is clearer: | ||
|
|
||
| ```tsx | ||
| import { RootAction, RootState, Services } from 'MyTypes'; | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This example introduces named imports from the To maintain a consistent teaching pattern and avoid confusing readers, it would be beneficial to either update the existing examples to use named imports or explicitly mention that named imports are the preferred approach for this pattern. |
||
|
|
||
| // reducer(state: RootState, action: RootAction) | ||
| // Epic<RootAction, RootAction, RootState, Services> | ||
| ``` | ||
|
|
||
| The main benefit is that ownership stays local. When a feature is removed, its local exports and the corresponding root composition can be removed with it. Components, reducers, epics, and tests still get a consistent type vocabulary without every file needing to know where each root type is assembled. | ||
|
|
||
| [⇧ back to top](#table-of-contents) | ||
|
|
||
| ### Create Store | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There is an unnecessary blank line at the end of this code block. Removing it will keep the formatting consistent with other blocks in the guide.