angularstart-quicklists's People
angularstart-quicklists's Issues
Using untracked() with selectors
I was having trouble implementing untracked()
with your state management design. It appears that each time I call this.state.update()
inside of a service, every selector gets recomputed because it is tracking a state signal with computed()
, therefore an effect tracking any of my selectors gets run again. In my case, I want to have an effect that will have 2 selectors inside of it, but track only one of them and use the other one just to get the value from it.
After some playing around I made some changes inside of the service that changed the way state and selectors are defined, but preserved the way a service is being used inside of a component.
I will present my changes grouped by the 4 main parts of your service design (state, selectors, sources and reducers) and will take for an example your ChecklistItemService
.
State:
I am not defining properties with their actual type, but I am wrapping them inside of a WritableSignal, turning state in a "container" for signals. Inside of a ChecklistItemService that would look like this:
export interface ChecklistItemsState {
checklistItems: WritableSignal<ChecklistItem[]>;
loaded: WritableSignal<boolean>;
}
//Inside of service class
private state: ChecklistItemsState = {
checklistItems: signal<ChecklistItem[]>([]),
loaded: signal<boolean>(false),
};
With this, my state is actually an object holding all signals in one place.
Selectors:
I would not have computed()
anymore, I would just access a signal from my state and cast it to Signal
so that inside of a component (or anywhere else) I don't have access to .set()
like I would have if I were to work with WritableSignal.
checklistItems: Signal<ChecklistItem[]> = this.state.checklistItems;
loaded: Signal<boolean> = this.state.loaded;
Sources:
Sources stay the same just like you already designed them.
Reducers:
In my approach, instead of this.state.update()
I would set the new value directly to a certain signal inside of a state. So instead of
this.state.update((state) => ({
...state,
checklistItems,
loaded: true,
}))
I would use:
this.state.checklistItem.set(checklistItems);
this.state.loaded.set(true);
This approach allows me to use untracked()
because now every piece of my state is independent of the component's state as a whole but is still kept in one place and is not modifiable from anywhere but from its own service class.
I would love to hear what is your opinion on this solution and what would you do better in my case.
problem in template after add the V17 control flow
the problem appears in the check-list.component.ts in the template value, the message is:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.)ngtsc(-995002)
Invalid ICU message. Missing '}'.ngtsc(-995002)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.