Skip to content

Commit

Permalink
Merge pull request aurelia#433 from baerrach/plugins-store
Browse files Browse the repository at this point in the history
Remove TypeScript State type from JavaScript examples.
  • Loading branch information
EisenbergEffect authored Jul 11, 2019
2 parents afc3e0d + 713a49d commit ac40e5b
Showing 1 changed file with 3 additions and 12 deletions.
15 changes: 3 additions & 12 deletions current/en-us/7. plugins/2. store.md
Original file line number Diff line number Diff line change
Expand Up @@ -134,8 +134,6 @@ As explained in the beginning, the Aurelia Store plugin provides a public observ
import { inject } from 'aurelia-dependency-injection';
import { Store } from 'aurelia-store';

import { State } from './state';

@inject(Store)
export class App {
constructor(store) { this.store = store; }
Expand Down Expand Up @@ -208,8 +206,6 @@ The above ViewModel example could look like this using the `connectTo` decorator
// app.js
import { connectTo } from 'aurelia-store';

import { State } from './state';

@connectTo()
export class App {
}
Expand Down Expand Up @@ -677,7 +673,6 @@ Next, we need to register the created action with the store. That is done by cal
// app.js
import { inject } from 'aurelia-dependency-injection';
import { Store } from 'aurelia-store';
import { State } from './state';

@inject(Store)
export class App {
Expand Down Expand Up @@ -809,8 +804,6 @@ Alternatively we can also provide the previously registered name instead.
import { inject } from 'aurelia-dependency-injection';
import { Store, connectTo } from 'aurelia-store';

import { State } from './state';

@inject(Store)
@connectTo()
export class App {
Expand Down Expand Up @@ -873,8 +866,6 @@ You call that using `store.pipe(reducer, params)` which returns a `PipedDispatch
import { inject } from 'aurelia-dependency-injection';
import { Store, connectTo } from 'aurelia-store';

import { State } from './state';

@inject(Store)
@connectTo()
export class App {
Expand Down Expand Up @@ -1012,19 +1003,19 @@ export class FrameworkItem {
With this approach, you can design your custom elements to act either as presentational or container components. For further information take a look at [this article](http://pragmatic-coder.net/using-a-state-container-with-aurelia/).

## Resetting the store to a specific state
Occasionally it might be necessary to *reset* the store to a specific state, without running through it built-in queue and thus without notifying middlewares.
Occasionally it might be necessary to *reset* the store to a specific state, without running through the built-in queue and thus without notifying middlewares.
A use case for this can be restoring the initial state or time-travelling with the Redux-DevTools extension. To do so use the method `resetToState` and pass in the desired state.
The result will be that a new state is emitted and your subscriptions will receive it.

> Keep in mind that this feature should be used with caution as it might introduce unintended side effects, especially in collaboration with the Redux DevTools, as the reset states are not tracked by it.
## Two-way binding and state management
Two-way binding definitely has its merits when it comes to easily develop applications. By having Aurelia take care of synchronizing of the View and ViewModel a lot of work gets done for free.
Two-way binding definitely has its merits when it comes to easily developing applications. By having Aurelia take care of synchronizing of the View and ViewModel a lot of work gets done for free.
This behavior though becomes troublesome when working with a central state management. Remember, the primary vision is to do state modifications only via dispatching actions. This way we guarantee a single source of truth and no side-effects.
Yet exactly the later is what a two-way binding introduces if you bind your ViewModel directly to state objects. So instead of two-way binding to state objects you should:

* Create a new property, reflecting the state part you'd like to modify and bind to that.
* When changes are made, persist the changes by dispatching an action which uses the binding models values
* When changes are made, persist the changes by dispatching an action which uses the binding model's values
* After dispatching make sure to update the binding model to match any updates to the object happening during dispatch

```JavaScript Using binding models instead of the state
Expand Down

0 comments on commit ac40e5b

Please sign in to comment.