Tuesday, 13 March, 2018 UTC


Summary

  • TinyState tries to solve the following problem: – – { } ; { count ; } * A Container is a very simple class that holds your state and some logic for updating it.
  • If you have global state that should be injectable in all your components, add the container(s) to the array of your root Module (which is usually called ): – – With the configuration show above, you can inject the container in every component of your application.
  • Let’s say we want to write a test for the following container: – – Here’s an example of a possible test with Jasmine: – – Let’s write a test for the following component: – – To enable support for the Redux Devtools Extension, add the following module to your root…
  • But you will see how the state of all your containers change, which is even without action names useful for debugging: – – Do you have a global state or a state that is needed in several components that you want to share between them and think that solutions like…
  • If you think your state is too complex/big or you want a replayable, fully predictable state container, you should consider using NGRX, NGXS or Redux.
GitHub is where people build software. More than 27 million people use GitHub to discover, fork, and contribute to over 80 million projects.
@JavaScriptDaily: TinyState: A Tiny, Powerful State Management Library for Angular –
GitHub is home to over 20 million developers working together to host and review code, manage projects, and build software together.
State management in every component-based application is hard. TinyState tries to solve the following problem:
Sharing state between components as simple as possible and leverage the good parts of component state and Angular`s dependency injection system.
Demo on Stackblitz.io
import { TinyStateModule } from ‘@tinystate/core’; @NgModule({ imports: [ CommonModule, TinyStateModule.forRoot() ] }) class AppModule {}
import { Container } from ‘@tinystate/core’; export interface CounterState { count: number; } /** * A Container is a very simple class that holds your state and some logic for updating it. * The shape of the state is described via an interface (in this example: CounterState). */ export class CounterContainer extends Container { getInitialState(): CounterState { return { count: 0 }; } increment(increment : number) { this.setState(state => ({ count: state.count + increment })); } decrement(decrement : number = 1) { this.setState(state => ({ count: state.count – decrement })); } } @Component({ selector: ‘my-component’, template: `
Counter: {{ counter$ | async }}
Increment Decrement `, providers: [ CounterContainer ] }) export class MyComponent { counter$: Observable = this.counterContainer.select(state => state.count); constructor(private counterContainer : CounterContainer) {} increment() { this.counterContainer.increment(1); } decrement() { this.counterContainer.decrement(); } }
@NgModule({ imports: [ CommonModule, TinyStateModule.forRoot() ], providers: [ CounterContainer ] }) class AppModule {}
configuration work in Angular, you should read…
GitHub