AndrewJBateman/angular-ngrx-tutorial

:clipboard: App that allows users to submit the name and url of a tutorial using a simple form and also to remove a tutorial, by using Ngrx/store, RxJS-powered state management.

⚡ Angular Ngrx Tutorial

• App that allows users to submit the name and url of a tutorial using a simple form and also to remove a tutorial, by using ngrx/store, RxJS-powered state management.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Angular Ngrx Tutorial
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• This app uses Ngrx Store, a RxJS-powered state management solution, to organise the app`s state. NgRX was built for Angular. NgRX is overkill for such a simple app but this is for learning purposes only.

📷 Screenshots

.

📶 Technologies

• Angular v16
• RxJS Library v7 used to handle datastreams and propagation of change using observables.
• ngrx/store v16

💾 Setup

• 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.

💻 Code Examples

• tutorial.reducer.ts file

import { Action } from '@ngrx/store';
import { Tutorial } from './../models/tutorial.model';
import * as TutorialActions from './../actions/tutorial.actions';

const initialState: Tutorial = {
  name: 'Initial Tutorial',
  url: 'http://google.com'
};

export function reducer(state: Tutorial[] = [initialState], action: TutorialActions.Actions) {

  switch (action.type) {
    case TutorialActions.ADD_TUTORIAL:
      return [...state, action.payload]; // use spread operator to add action.payload to the array

    case TutorialActions.REMOVE_TUTORIAL:
      const currentState = [...state];
      currentState.splice(action.payload, 1); // use splice to remove selected item
      return currentState;

    default:
      return state;
  }
}

🆒 Features

• Adds titles of courses and weblinks to a list array using NgRX for state management.

📋 Status & To-Do List

• Status: Working.
• To-Do: Nothing

👏 Inspiration

• Article by Richard Oliver Bray: A Beginner’s Guide to Ngrx/store.

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: `gomezbateman@yahoo´.com