https://github.com/ngxs-labs/immer-adapter
:hamster: Declarative state mutations
https://github.com/ngxs-labs/immer-adapter
adapter immer ngxs stage-3
Last synced: 5 months ago
JSON representation
:hamster: Declarative state mutations
- Host: GitHub
- URL: https://github.com/ngxs-labs/immer-adapter
- Owner: ngxs-labs
- License: mit
- Created: 2018-10-21T21:32:01.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2025-05-13T10:05:03.000Z (about 1 year ago)
- Last Synced: 2025-09-02T03:55:42.159Z (9 months ago)
- Topics: adapter, immer, ngxs, stage-3
- Language: TypeScript
- Homepage:
- Size: 6.13 MB
- Stars: 46
- Watchers: 5
- Forks: 10
- Open Issues: 41
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
---
> Declarative state mutations
[](https://travis-ci.org/ngxs-labs/immer-adapter)
[](https://www.npmjs.com/package/@ngxs-labs/immer-adapter)
[](https://github.com/ngxs-labs/immer-adapter/blob/master/LICENSE)
[](https://www.codacy.com/app/arturovt/immer-adapter?utm_source=github.com&utm_medium=referral&utm_content=ngxs-labs/immer-adapter&utm_campaign=Badge_Grade)
#### 📦 Install
To install `@ngxs-labs/immer-adapter` and `immer` that is a peer-dependency run the following command:
```console
npm install @ngxs-labs/immer-adapter immer
# or if you use yarn
yarn add @ngxs-labs/immer-adapter immer
```
##### Before
When your state is growing - it becomes harder to manage such mutations:
```ts
import { State, Action, StateContext } from '@ngxs/store';
export class FeedZebra {
public static readonly type = '[Animals] Feed zebra';
constructor(public payload: string) {}
}
@State({
name: 'animals',
defaults: {
zebra: {
food: ['leaves', 'bark'],
name: 'zebra'
},
panda: {
food: [],
name: 'panda'
}
}
})
export class AnimalState {
@Selector()
public static zebraFood(state: AnimalsStateModel): string[] {
const zebraFood = [...state.zebra.food];
zebraFood.reverse();
}
@Action(Add)
public add({ getState, setState }: StateContext, { payload }: Add): void {
setState((state: AnimalsStateModel) => ({
...state,
zebra: {
...state.zebra,
food: [ ...state.zebra.food, payload ]
}
}));
}
}
```
##### After
`immer-adapter` gives you the opportunity to manage mutations in a more declarative way:
```ts
import { ImmutableContext, ImmutableSelector } from '@ngxs-labs/immer-adapter';
@State({
name: 'animals',
defaults: {
zebra: {
food: [],
name: 'zebra'
},
panda: {
food: [],
name: 'panda'
}
}
})
export class AnimalState {
@Selector()
@ImmutableSelector()
public static zebraFood(state: AnimalsStateModel): string[] {
return state.zebra.food.reverse();
}
@Action(Add)
@ImmutableContext()
public add({ setState }: StateContext, { payload }: Add): void {
setState((state: AnimalsStateModel) => ({
state.zebra.food.push(payload);
return state;
}));
}
}
```