Jujens' blog

Aurelia Store and Immer

I spoke last year of Aurelia store in this article At the time, it wasn't possible to combine Aurelia Store and Immer. The root cause of the issue was fixed in the latest version of Immer (7.0), so we can now combine both.

Let's study how to do this:

Install immer with npm install --save immer@^7.0.7 or yarn add immer@^7.0.7
Because we need Aurelia to update the state when it's used in component to add some observers, we must disable immer's auto-freezing. You can do this in main.js or app.js with:
```
import {setAutoFreeze} from 'immer';
// This is required to allow Aurelia to add its observer on objects in the state.
setAutoFreeze(false);
```
Update you actions to use produce. This will allow you to modify the state directly without mutating it. This way, the history features of the store will be preserved. For a simple example:
```
// Before.
export function selectBackend(state: State, selectedBackend: SelectableBackend) {
    const newState = {...state};
    newState.selectedBackend = selectedBackend;
    return newState;
}

// After
export const selectBackend = produce((state: State, selectedBackend: SelectableBackend) => {
    state.selectedBackend = selectedBackend;
});
```
Thanks to immer, you don't have to copy the state explicitly, immer will create a new state based on your modification automatically. The produce function takes a function that will receive the draft of the state you can modify as first argument and all other arguments passed to you action as extra arguments. So the function you need to pass to produce takes the same arguments as a standard action. You still need to be aware and pay attention to some details:
- All the objects in the store are changed so immer can track the changes without modifying the original objects. This means that this won't work:
```
export deleteArticle = produce((state, article) => {
    // Will return -1 because article is not in the articles array, it's proxied version is.
    const indexOfArticleToDelete = state.articles.indexOf(article);
});
```
- Only the state will be a "draft" (to use immer terminology) and can be modified directly. If you were to modify other argument, you would mutate them. And if they are in the store, you would update them the store as well. So this won't work as expected and will mutate the object:
```
export markAsRead = produce((state, article) => {
   article.isRead = true;
});
```
For both these issues, you need to first find the proper object in the draft state and apply the modification to it. You can view an example here.

If you want more detail, you can check this commit of one of my project when I updated my actions to use immer.

As noted by Vildan Softic (the creator of Aurelia Store), you can organize how you update the state differently to update the state correctly while keeping things clear without requiring immer. You can see an example here. Many thanks to him for pointing that out and giving me some pointer to correctly test Aurelia Store with Immer.

So while I think it's really nice to be able to use Immer, whether to use it or not highly depends on your programming style and on whether you can afford adding yet another library to your project (immer is about 15kB minified which is tiny, but it adds up with the rest).

Other articles

Switching from Aurelia CLI to Webpack

Sat 04 July 2020 | tags: JavaScript Aurelia Webpack

Recently I decided to change the build system I use on my main Aurelia project. I changed in April 2016 from JSPM to Webpack (JSPM was really not awesome at the time, I can't say for now), again in August 2016 from Webpack to the CLI and now I am …
read more
Writing a PWA with Aurelia
Sun 01 September 2019 | tags: JavaScript TypeScript Aurelia Mobile PWA
Sommaire
I feel like Progressive Web Application (PWA for short) are a more and more popular way to build mobile apps. That's understandable since you can use the same technology you use to build a SPA to build one! So you …
read more
Some thoughts on Aurelia Store

Sat 24 August 2019 | tags: JavaScript TypeScript Aurelia RxJS

On my spare time, I am developing a board game that uses the Aurelia framework. I currently manage the state in a service without any dedicated state management solutions (like RxJS, Aurelia store, Redux, …). And I feel I am reaching to the limit of what I can do with it …
read more
Issues while writing tests for a component using i18n

Sun 04 August 2019 | tags: JavaScript TypeScript Aurelia i18N

Some time ago, I wanted to add some tests (behavior and render) on an Aurelia component that uses the i18n plugin and more precisely the df attribute in the view to display a localized date.

Since it was a while back (I wanted to write it earlier but couldn't), my …
read more
Extract translations from your Aurelia app

Sat 03 August 2019 | tags: JavaScript TypeScript Aurelia i18N

If you use Aurelia with the i18n plugin, you will have to maintain JSON files that will map a translation key to an actual translation. Manually editing the file to add/remove keys can be tedious.

Luckily, keys can be extracted automatically thanks to i18next-scanner. It can extract translation keys …
read more
Integrate Rollbar with Aurelia
Sat 19 August 2017 | tags: aurelia rollbar

I recently integrated Rollbar (a service to Detect, diagnose and debug errors with ease) into an Aurelia application. I explain here how I did it. I start by explaining how logging works with Aurelia and then how I integrated Rollbar into this.
Sommaire
- Logging with Aurelia
- Integration with Rollbar
  
  Using …
read more
A sample application with Aurelia UX

Mon 14 August 2017 | tags: ionic2 angular2 aurelia framework7 android mobile

This is a follow up to my Small comparison of ionic2 and Aurelia + Framework7 for hybrid mobile applications article where I compared ionic2 and Aurelia with Framework 7 for building an hybrid applications. At the time, Aurelia UX was not yet ready (and we were expecting a different, closed source …
read more
Form validation with Aurelia

Tue 24 January 2017 | tags: aurelia android mobile

Update (2017-07-20): aurelia-validation now supports events, so it is much easier to disable the submission of the form until it is valid. See the Disable the submission until the form is valid section for the code.

Update (2017-01-25): after new exchanges with Doug Kent I was able to improve my …
read more
Make navigation user friendly on your Aurelia SPA
Sun 28 August 2016 | tags: aurelia font awesome
Sommaire
Add a spinner
1. Add the font awesome files to your project (CSS and fonts files).
2. Import the font awesome style sheet in your index.html
  
  <link rel="stylesheet" href="/assets/fonts/fontawesome/font-awesome …
read more

Page 1 / 2 » ⇉

Other articles

Pages

blogroll

social