https://github.com/logisticinfotech/easiest-demo-ngrx-angular6
Easiest demo of ngrx in angular6 with little ui state management
https://github.com/logisticinfotech/easiest-demo-ngrx-angular6
angular angular6 demo-app developer ngrx tutorial
Last synced: about 1 year ago
JSON representation
Easiest demo of ngrx in angular6 with little ui state management
- Host: GitHub
- URL: https://github.com/logisticinfotech/easiest-demo-ngrx-angular6
- Owner: logisticinfotech
- Created: 2018-07-03T09:28:27.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-28T09:55:43.000Z (almost 8 years ago)
- Last Synced: 2025-04-23T21:08:48.447Z (about 1 year ago)
- Topics: angular, angular6, demo-app, developer, ngrx, tutorial
- Language: TypeScript
- Homepage: https://www.logisticinfotech.com/blog/easiest-demo-to-learn-ngrx-in-angular-6
- Size: 35.2 KB
- Stars: 10
- Watchers: 5
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Easiest Ngrx Demo with little UI state managment like tab, input, select, radio
Purpose of this demo is to understand ngrx easily. You can find step by step guide [here](https://www.logisticinfotech.com/blog/easiest-demo-to-learn-ngrx-in-angular-6) to understand this demo properly.
## ngrx/store configuration
First install `@ngRx/store`
```
npm install @ngrx/store --save
```
define `uiState` in ui.state.ts file
```
export interface UIState {
...
selectedTab: string;
...
}
```
define `uiActions` in ui.actions.ts file
```
import { Action } from '@ngrx/store';
export const UIActionsTypes = {
...
TAB_CHANGED_ACTION: '[UI] -Tab changed-',
...
};
...
export class TabChangedAction implements Action {
type = UIActionsTypes.TAB_CHANGED_ACTION;
constructor(public payload: any) { }
}
...
export type UIActions =
| TabChangedAction;
```
define `uiReducer` in ui.reducer.ts file
```
import { UIState } from './ui.state';
import { UIActions, UIActionsTypes } from './ui.actions';
export const appInitialState: UIState = {
...
selectedTab: 'nav-tab1-tab',
...
};
export function uiReducer(state = appInitialState, action: UIActions): UIState {
switch (action.type) {
...
case UIActionsTypes.TAB_CHANGED_ACTION: {
return Object.assign(state, {
...state,
selectedTab: action.payload
});
}
...
default: {
return state;
}
}
}
```
configure `reducers` in app.reducer.ts file and `states` in app.state.ts
```
import { UIState } from './UI/ui.state';
export interface AppState {
ui: UIState;
}
```
```
import { AppState } from './app.state';
import { uiReducer } from './UI/ui.reducer';
export const reducers: ActionReducerMap = {
ui: uiReducer,
};
```
for configuring store in application, add following set up in your `app.module.ts` file
```
import { reducers } from './store/app.reducer';
imports: [
...
StoreModule.forRoot(reducers)
...
]
```
## How to use in component
To access `selectedTab` property form store in your component file...
```
import { Store } from '@ngrx/store';
import { AppState } from '../../store/app.state';
export class TabsComponent implements OnInit {
selectedTab: Observable;
constructor(private store: Store) {
this.selectedTab = this.store.select(state => state.ui.selectedTab);
}
onChangeTab(id) {
this.store.dispatch(new TabChangedAction(id));
}
}
```
in tabs.component.html
```
Tab 1
```
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
## Further help
Checkout full blog [here](https://www.logisticinfotech.com/blog/easiest-demo-to-learn-ngrx-in-angular-6).