https://github.com/qontu/component-store
https://github.com/qontu/component-store
angular angular2 angular4 angular5 angular6 angular7 component component-store immer redux store
Last synced: 12 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/qontu/component-store
- Owner: qontu
- License: mit
- Created: 2018-10-03T22:10:44.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-10T12:05:09.000Z (about 7 years ago)
- Last Synced: 2025-02-16T08:43:25.204Z (about 1 year ago)
- Topics: angular, angular2, angular4, angular5, angular6, angular7, component, component-store, immer, redux, store
- Language: TypeScript
- Size: 134 KB
- Stars: 2
- Watchers: 5
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Component Store
Inspired (semi-forked) of https://github.com/amcdnl/ngrx-actions
The mission of this (another more... :laughing:) `store` is to maintain the state of a component (not the wide app).
I have been searching for one and I didn't find any... then, I created it :sweat_smile:
## Dependencies
This module depends on [immer](https://github.com/mweststrate/immer)
## How to install?
`npm i immer @qontu/component-store` or `yarn add immer @qontu/component-store`
## How to use?
You can see an example [here](./playground/src/app/components/button)
## Why do I need to install immer?
Because it's a powerful inmutable state tree, it allow us to do:
```ts
interface UserListState {
users: User[],
usersMap: Record,
}
@Store({
users: [],
usersMap: {},
})
export class UserListStore {
@Action(Update)
updateUsingImmer(state: UserListState, { user }: Update) {
const userToUpdate = state.users.find(({ id }) => id === user.id);
Object.assign(userToUpdate, user);
}
@Action(Update)
updateWithoutImmer(state: UserListState, { user }: Update) {
return {
...state,
users: [
...state.users.filter(({ id }) => id !== user.id),
user,
]
}
}
// Update an object-map
@Action(Update)
updateUsingImmer(state: UserListState, { user }: Update) {
state.usersMap[user.id] = user;
}
@Action(Update)
updateWithoutImmer(state: UserListState, { user }: Update) {
return {
...state,
usersMap: [
...state.usersMap,
[user.id]: user,
]
}
}
}
```
you can use both in the same time, choose the one that you prefer :smile: