chore: initial scaffolding for the project

Author: crutchcorn

package-lock.json

@@ -18,6 +18,8 @@
     "@angular/platform-browser": "^18.2.0",
     "@angular/platform-browser-dynamic": "^18.2.0",
     "@angular/router": "^18.2.0",
+    "@reduxjs/toolkit": "^2.2.7",
+    "redux": "^5.0.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.10"

package.json

@@ -0,0 +1,35 @@
+import { Component } from '@angular/core';
+import {injectSelector, injectDispatch} from "angular-redux";
+import { decrement, increment } from './store/counter-slice'
+import { RootState } from './store'
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [],
+  template: `
+    <div>
+      <div>
+        <button
+          aria-label="Increment value"
+          (click)="dispatch(increment())"
+        >
+        Increment
+        </button>
+        <span>{{ count }}</span>
+        <button
+          aria-label="Decrement value"
+          (click)="dispatch(decrement())"
+        >
+        Decrement
+        </button>
+      </div>
+    </div>
+  `
+})
+export class AppComponent {
+  count = injectSelector((state: RootState) => state.counter.value)
+  dispatch = injectDispatch()
+  increment = increment;
+  decrement = decrement;
+}

projects/angular-redux-demo/src/app/app.component.bak.ts

@@ -1,16 +1,16 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core'
+import { ReduxProvider } from 'angular-redux'
 
 @Component({
   selector: 'app-root',
   standalone: true,
   imports: [],
   template: `
-    <h1>Welcome to {{title}}!</h1>
-
-    
-  `,
-  styles: [],
+    <div>
+      {{data.message}}
+    </div>
+  `
 })
 export class AppComponent {
-  title = 'angular-redux-demo';
+  data = inject(ReduxProvider)
 }

projects/angular-redux-demo/src/app/app.component.ts

@@ -1,5 +1,10 @@
 import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import {provideRedux} from "angular-redux";
+import { store } from './store'
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true })]
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRedux({ store })
+  ]
 };

projects/angular-redux-demo/src/app/app.config.ts

@@ -0,0 +1,35 @@
+import { createSlice } from '@reduxjs/toolkit'
+import type { PayloadAction } from '@reduxjs/toolkit'
+
+export interface CounterState {
+  value: number
+}
+
+const initialState: CounterState = {
+  value: 0,
+}
+
+export const counterSlice = createSlice({
+  name: 'counter',
+  initialState,
+  reducers: {
+    increment: (state) => {
+      // Redux Toolkit allows us to write "mutating" logic in reducers. It
+      // doesn't actually mutate the state because it uses the Immer library,
+      // which detects changes to a "draft state" and produces a brand new
+      // immutable state based off those changes
+      state.value += 1
+    },
+    decrement: (state) => {
+      state.value -= 1
+    },
+    incrementByAmount: (state, action: PayloadAction<number>) => {
+      state.value += action.payload
+    },
+  },
+})
+
+// Action creators are generated for each case reducer function
+export const { increment, decrement, incrementByAmount } = counterSlice.actions
+
+export default counterSlice.reducer

projects/angular-redux-demo/src/app/store/counter-slice.ts

@@ -0,0 +1,13 @@
+import { configureStore } from '@reduxjs/toolkit'
+import counterReducer from './counter-slice'
+
+export const store = configureStore({
+  reducer: {
+    counter: counterReducer,
+  },
+})
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof store.getState>
+// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
+export type AppDispatch = typeof store.dispatch