refactor(store): add action registry #2224

arturovt · 2024-10-01T11:01:02Z

This adds a new internal construct, called the ActionRegistry.
The ActionRegistry facilitates the registration, and recall, of all handlers associated with an action type.
The default handler registered for each @Action within a state is now responsible for handling the return value of the user's handler within the state and the cancellation logic for the handler.

nx-cloud · 2024-10-01T11:03:19Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit ddbed56. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

✅ Successfully ran 4 targets

Sent with 💌 from NxCloud.

pkg-pr-new · 2024-10-01T11:03:38Z

Open in Stackblitz

@ngxs/devtools-plugin

yarn add https://pkg.pr.new/@ngxs/devtools-plugin@2224.tgz

@ngxs/form-plugin

yarn add https://pkg.pr.new/@ngxs/form-plugin@2224.tgz

@ngxs/hmr-plugin

yarn add https://pkg.pr.new/@ngxs/hmr-plugin@2224.tgz

@ngxs/router-plugin

yarn add https://pkg.pr.new/@ngxs/router-plugin@2224.tgz

@ngxs/storage-plugin

yarn add https://pkg.pr.new/@ngxs/storage-plugin@2224.tgz

@ngxs/store

yarn add https://pkg.pr.new/@ngxs/store@2224.tgz

@ngxs/websocket-plugin

yarn add https://pkg.pr.new/@ngxs/websocket-plugin@2224.tgz

commit: ddbed56

bundlemon · 2024-10-01T11:07:05Z

BundleMon

Files updated (1)

Status	Path	Size	Limits
✅	fesm2022/ngxs-store.mjs	100.32KB (+152B +0.15%)	101KB / +0.5%

Unchanged files (5)

Status	Path	Size	Limits
✅	fesm2022/ngxs-store-internals.mjs	11.36KB	13KB / +0.5%
✅	fesm2022/ngxs-store-internals-testing.mjs	6.83KB	7KB / +0.5%
✅	fesm2022/ngxs-store-operators.mjs	6.22KB	7KB / +0.5%
✅	fesm2022/ngxs-store-plugins.mjs	2.04KB	3KB / +0.5%
✅	fesm2022/ngxs-store-experimental.mjs	1.4KB	2KB / +0.5%

Total files change +152B +0.12%

Groups updated (2)

Status	Path	Size	Limits
✅	@ngxs/store(esm2022)[gzip] _{./esm2022/*/.mjs}	222.11KB (+1.27KB +0.58%)	+1%
✅	@ngxs/store(fesm2022)[gzip] _{./fesm2022/*.mjs}	30.63KB (-87B -0.28%)	+1%

Final result: ✅

View report in BundleMon website ➡️

Current branch size history | Target branch size history

bundlemon · 2024-10-01T11:07:08Z

BundleMon (NGXS Plugins)

Unchanged files (9)

Status	Path	Size	Limits
✅	Plugins(fesm2022)[gzip] _{storage-plugin/fesm2022/ngxs-storage-plugin.m js}	4.15KB	+0.5%
✅	Plugins(fesm2022)[gzip] _{router-plugin/fesm2022/ngxs-router-plugin.mjs}	3.2KB	+0.5%
✅	Plugins(fesm2022)[gzip] _{websocket-plugin/fesm2022/ngxs-websocket-plug in.mjs}	2.64KB	+0.5%
✅	Plugins(fesm2022)[gzip] _{hmr-plugin/fesm2022/ngxs-hmr-plugin.mjs}	2.61KB	+0.5%
✅	Plugins(fesm2022)[gzip] _{form-plugin/fesm2022/ngxs-form-plugin.mjs}	2.59KB	+0.5%
✅	Plugins(fesm2022)[gzip] _{devtools-plugin/fesm2022/ngxs-devtools-plugin .mjs}	2.23KB	+0.5%
✅	Plugins(fesm2022)[gzip] _{logger-plugin/fesm2022/ngxs-logger-plugin.mjs}	2.09KB	+0.5%
✅	Plugins(fesm2022)[gzip] _{storage-plugin/fesm2022/ngxs-storage-plugin-i nternals.mjs}	875B	+0.5%
✅	Plugins(fesm2022)[gzip] _{router-plugin/fesm2022/ngxs-router-plugin-int ernals.mjs}	411B	+0.5%

No change in files bundle size

Unchanged groups (1)

Status	Path	Size	Limits
✅	All Plugins(fesm2022)[gzip] _{./-plugin/fesm2022/.mjs}	20.76KB	+0.5%

Final result: ✅

View report in BundleMon website ➡️

Current branch size history | Target branch size history

bundlemon · 2024-10-01T11:07:10Z

BundleMon (Integration Projects)

Files updated (3)

Status	Path	Size	Limits
✅	Main bundles(Gzip) _{hello-world-ng18/dist-integration/browser/mai n-(hash).js}	71.81KB (+64B +0.09%)	+1%
✅	Main bundles(Gzip) _{hello-world-ng16/dist-integration/main.(hash) .js}	67.74KB (+47B +0.07%)	+1%
✅	Main bundles(Gzip) _{hello-world-ng17/dist-integration/main.(hash) .js}	68.71KB (+47B +0.07%)	+1%

Total files change +158B +0.07%

Final result: ✅

View report in BundleMon website ➡️

Current branch size history | Target branch size history

markwhitfeld

Great first step of the refactoring, but see my comments for the change in the handlers.

packages/store/src/actions/action-registry.ts

packages/store/src/internal/state-factory.ts

markwhitfeld

Please see comments in this review and the suggested code changes from the previous review.

markwhitfeld · 2024-10-02T20:30:41Z

packages/store/src/actions/action-registry.ts

+    };
+  }
+
+  private _createActionHandler(actionMeta: InvokableActionHandlerMetaData) {


As mentioned in the second comment of my previous review, the creation of the handler which in turn creates the state context, should stay outside of the action registry (in the StateFactory, for now).
Also the result handling logic should remain where it was in the StateFactory.

markwhitfeld · 2024-10-02T20:33:55Z

packages/store/src/actions/action-registry.ts

+interface InvokableActionHandlerMetaData extends ɵActionHandlerMetaData {
+  path: string;
+  instance: any;
+}


This data structure should no longer be needed for the registry.
The registry should be super simple, only storing the handler functions, constructed and provided by the StateFactory.
The place in the StateFactory where the handler is created should contain enough access from its closure to be able to do all that it needs.

packages/store/src/actions/dispatched-actions.ts

markwhitfeld

Great work!!!!

codeclimate · 2024-10-14T14:25:36Z

Code Climate has analyzed commit ddbed56 and detected 0 issues on this pull request.

The test coverage on the diff in this pull request is 96.4% (50% is the threshold).

This pull request will bring the total coverage in the repository to 95.3% (-0.1% change).

View more on Code Climate.

hakimio · 2024-10-23T07:51:32Z

@arturovt
Sorry to bother you, just wanted to ask for a small favor.
@angular-ru/ngxs library relies heavily on ngxs/store internals. After your recent ngxs refactoring, I have updated @angular-ru/ngxs to be compatible with ngxs v18.1.3 (Angular-RU/angular-ru-sdk#1527) but since I'm not too familiar with ngxs inner workings, I imagine the code might be suboptimal. When you have some time, could you take a look at the PR and specifically at the @DataAction decorator (docs) and let me know if the code could be improved?

arturovt · 2024-10-23T13:39:01Z

I would first remove NgxsDataInjector.ngZone?.run(...) because it’s not required for NGXS. It doesn’t care whether dispatched events come from the Angular zone or not, as the state updates are decoupled from the dispatcher, and the new state always occurs within the Angular zone.

Since states are decorated with @StateRepository, that decorator could return a new constructor function, which is always called within the Angular injection context. You can capture the injector through this[SomeInternalInjectorSymbol] = inject(Injector). The descriptor.value function now has access to this[SomeInternalInjectorSymbol] and can retrieve anything from the "app" injector as well as from the globally configured static injector. However, static properties wouldn't work properly for server-side rendered apps. If a new app is rendered for the first HTTP request and then a second request comes in, the newly bootstrapped app would overwrite static properties.

hakimio · 2024-10-23T13:52:30Z

Thanks for the suggestions.

You can capture the injector through this[SomeInternalInjectorSymbol] = inject(Injector).

Basically this type of injector usage instead of global static injector could fix the mentioned SSR issue?

What do you think about the operation caching used in the @DataAction decorator? Is it necessary and can it be simplified?

Is it ok to use hydrateActionMetasMap() in the decorator or could there be some better/simpler way to register the handlers?

arturovt · 2024-10-24T16:13:58Z

I think it might be better to find a way to register actions without relying on internal APIs, which are likely to change in the future. It seems that the DataAction decorator updates the metadata only when the method is called for the first time, but it should behave like the Action decorator and update the metadata immediately. This would eliminate the need to call hydrateActionMetasMap.

hakimio · 2024-10-25T08:22:35Z

@arturovt thank you for your insights.
The @Action decorator is definitely a good example of how @DataAction could be implemented.

refactor(store): add action registry

d31fe95

markwhitfeld requested changes Oct 1, 2024

View reviewed changes

packages/store/src/actions/action-registry.ts Outdated Show resolved Hide resolved

packages/store/src/internal/state-factory.ts Outdated Show resolved Hide resolved

refactor: apply comments

004e1f1

arturovt force-pushed the refactor/action-registry branch from e84ace2 to 004e1f1 Compare October 2, 2024 16:58

markwhitfeld requested changes Oct 2, 2024

View reviewed changes

arturovt added 3 commits October 3, 2024 00:14

refactor: revert changes back

0b7f631

refactor(store): move cancelation into action handler

206160f

refactor: remove fdescribe

891588f

arturovt force-pushed the refactor/action-registry branch from b30d523 to 891588f Compare October 14, 2024 13:23

markwhitfeld approved these changes Oct 14, 2024

View reviewed changes

Merge branch 'master' into refactor/action-registry

6ea346a

markwhitfeld marked this pull request as ready for review October 14, 2024 14:13

markwhitfeld requested review from kuncevic, Carniatto, poloagustin, joaqcid and splincode as code owners October 14, 2024 14:13

chore: update CHANGELOG.md

ddbed56

arturovt merged commit d6b076c into master Oct 14, 2024
18 checks passed

arturovt deleted the refactor/action-registry branch October 14, 2024 19:13

hakimio mentioned this pull request Oct 22, 2024

🐞 - @StateRepository decorator error when used with @ngxs/store v18.1.3 Angular-RU/angular-ru-sdk#1526

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(store): add action registry #2224

refactor(store): add action registry #2224

arturovt commented Oct 1, 2024 •

edited by markwhitfeld

Loading

nx-cloud bot commented Oct 1, 2024 •

edited

Loading

pkg-pr-new bot commented Oct 1, 2024 •

edited

Loading

bundlemon bot commented Oct 1, 2024 •

edited

Loading

bundlemon bot commented Oct 1, 2024 •

edited

Loading

bundlemon bot commented Oct 1, 2024 •

edited

Loading

markwhitfeld left a comment

markwhitfeld left a comment

markwhitfeld Oct 2, 2024

markwhitfeld Oct 2, 2024

markwhitfeld left a comment

codeclimate bot commented Oct 14, 2024

hakimio commented Oct 23, 2024

arturovt commented Oct 23, 2024

hakimio commented Oct 23, 2024

arturovt commented Oct 24, 2024

hakimio commented Oct 25, 2024

refactor(store): add action registry #2224

refactor(store): add action registry #2224

Conversation

arturovt commented Oct 1, 2024 • edited by markwhitfeld Loading

nx-cloud bot commented Oct 1, 2024 • edited Loading

☁️ Nx Cloud Report

pkg-pr-new bot commented Oct 1, 2024 • edited Loading

bundlemon bot commented Oct 1, 2024 • edited Loading

BundleMon

bundlemon bot commented Oct 1, 2024 • edited Loading

BundleMon (NGXS Plugins)

bundlemon bot commented Oct 1, 2024 • edited Loading

BundleMon (Integration Projects)

markwhitfeld left a comment

Choose a reason for hiding this comment

markwhitfeld left a comment

Choose a reason for hiding this comment

markwhitfeld Oct 2, 2024

Choose a reason for hiding this comment

markwhitfeld Oct 2, 2024

Choose a reason for hiding this comment

markwhitfeld left a comment

Choose a reason for hiding this comment

codeclimate bot commented Oct 14, 2024

hakimio commented Oct 23, 2024

arturovt commented Oct 23, 2024

hakimio commented Oct 23, 2024

arturovt commented Oct 24, 2024

hakimio commented Oct 25, 2024

arturovt commented Oct 1, 2024 •

edited by markwhitfeld

Loading

nx-cloud bot commented Oct 1, 2024 •

edited

Loading

pkg-pr-new bot commented Oct 1, 2024 •

edited

Loading

bundlemon bot commented Oct 1, 2024 •

edited

Loading

bundlemon bot commented Oct 1, 2024 •

edited

Loading

bundlemon bot commented Oct 1, 2024 •

edited

Loading