chore: add prettier and format files

Author: crutchcorn

.github/workflows/test.yml

@@ -10,8 +10,8 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '20.x'
-          cache: 'yarn'
+          node-version: "20.x"
+          cache: "yarn"
 
       - name: Install packages
         run: yarn install

angular.json

@@ -27,14 +27,9 @@
         "test": {
           "builder": "@angular-devkit/build-angular:jest",
           "options": {
-            "exclude": [
-              "**/schematics/ng-add/*.spec.ts"
-            ],
+            "exclude": ["**/schematics/ng-add/*.spec.ts"],
             "tsConfig": "projects/angular-redux/tsconfig.spec.json",
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ]
+            "polyfills": ["zone.js", "zone.js/testing"]
           }
         }
       }
@@ -79,19 +74,15 @@
             "outputPath": "dist/angular-redux-demo",
             "index": "projects/angular-redux-demo/src/index.html",
             "browser": "projects/angular-redux-demo/src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
+            "polyfills": ["zone.js"],
             "tsConfig": "projects/angular-redux-demo/tsconfig.app.json",
             "assets": [
               {
                 "glob": "**/*",
                 "input": "projects/angular-redux-demo/public"
               }
             ],
-            "styles": [
-              "projects/angular-redux-demo/src/styles.css"
-            ],
+            "styles": ["projects/angular-redux-demo/src/styles.css"],
             "scripts": []
           },
           "configurations": {

docs/introduction/getting-started.md

@@ -3,7 +3,7 @@ id: getting-started
 title: Getting Started with Angular Redux
 hide_title: true
 sidebar_label: Getting Started
-description: 'Introduction > Getting Started: First steps with Angular Redux'
+description: "Introduction > Getting Started: First steps with Angular Redux"
 ---
 
 # Getting Started with Angular Redux
@@ -25,9 +25,9 @@ ng add @reduxjs/angular-redux@latest
 #### Optional `ng add` flags
 
 | flag          | description                                                                                                                                                                         | value type | default value |
-|---------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------|---------------|
-| `--path`      | Path to the module that you wish to add the import for the `provideRedux` to.                                                                                           | `string`   ||
-| `--project`   | Name of the project defined in your `angular.json` to help locating the module to add the `provideRedux` to.                                                                        | `string`   ||
+| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------------- |
+| `--path`      | Path to the module that you wish to add the import for the `provideRedux` to.                                                                                                       | `string`   |               |
+| `--project`   | Name of the project defined in your `angular.json` to help locating the module to add the `provideRedux` to.                                                                        | `string`   |               |
 | `--module`    | Name of file containing the module that you wish to add the import for the `provideRedux` to. Can also include the relative path to the file. For example, `src/app/app.module.ts`. | `string`   | `app`         |
 | `--storePath` | The file path to create the state in.                                                                                                                                               | `string`   | `store`       |
 
@@ -50,7 +50,6 @@ npm install @reduxjs/angular-redux
 yarn add @reduxjs/angular-redux
 ```
 
-
 You'll also need to [install Redux](https://redux.js.org/introduction/installation) and [set up a Redux store](https://redux.js.org/recipes/configuring-your-store/) in your app.
 
 Angular-Redux is written in TypeScript, so all types are automatically included.
@@ -62,15 +61,13 @@ Angular-Redux is written in TypeScript, so all types are automatically included.
 Angular Redux includes a `provideRedux` provider factory, which makes the Redux store available to the rest of your app:
 
 ```typescript
-import { bootstrapApplication } from '@angular/platform-browser';
+import { bootstrapApplication } from "@angular/platform-browser";
 import { provideRedux } from "angular-redux";
-import { AppComponent } from './app/app.component';
-import { store } from './store'
+import { AppComponent } from "./app/app.component";
+import { store } from "./store";
 
 bootstrapApplication(AppComponent, {
-  providers: [
-    provideRedux({ store })
-  ]
+  providers: [provideRedux({ store })],
 });
 ```
 
@@ -81,29 +78,25 @@ Angular Redux provides a pair of custom Angular injectable functions that allow
 `injectSelector` reads a value from the store state and subscribes to updates, while `injectDispatch` returns the store's `dispatch` method to let you dispatch actions.
 
 ```typescript
-import { Component } from '@angular/core'
+import { Component } from "@angular/core";
 import { injectSelector, injectDispatch } from "@reduxjs/angular-redux";
-import { decrement, increment } from './store/counter-slice'
-import { RootState } from './store'
+import { decrement, increment } from "./store/counter-slice";
+import { RootState } from "./store";
 
 @Component({
-  selector: 'app-root',
+  selector: "app-root",
   standalone: true,
   template: `
-      <button (click)="dispatch(increment())">
-        Increment
-      </button>
-      <span>{{ count() }}</span>
-      <button (click)="dispatch(decrement())">
-        Decrement
-      </button>
-  `
+    <button (click)="dispatch(increment())">Increment</button>
+    <span>{{ count() }}</span>
+    <button (click)="dispatch(decrement())">Decrement</button>
+  `,
 })
 export class AppComponent {
-  count = injectSelector((state: RootState) => state.counter.value)
-  dispatch = injectDispatch()
-  increment = increment
-  decrement = decrement
+  count = injectSelector((state: RootState) => state.counter.value);
+  dispatch = injectDispatch();
+  increment = increment;
+  decrement = decrement;
 }
 ```
 

docs/tutorials/quick-start.md

@@ -48,11 +48,11 @@ npm install @reduxjs/toolkit angular-redux
 Create a file named `src/app/store.ts`. Import the `configureStore` API from Redux Toolkit. We'll start by creating an empty Redux store, and exporting it:
 
 ```typescript title="app/store.ts"
-import { configureStore } from '@reduxjs/toolkit'
+import { configureStore } from "@reduxjs/toolkit";
 
 export default configureStore({
   reducer: {},
-})
+});
 ```
 
 This creates a Redux store, and also automatically configure the Redux DevTools extension so that you can inspect the store while developing.
@@ -62,19 +62,18 @@ This creates a Redux store, and also automatically configure the Redux DevTools
 Once the store is created, we can make it available to our Angular components by putting an Angular Redux `provideRedux` in our application's `providers` array in `src/main.ts`. Import the Redux store we just created, put a `provideRedux` in your application's `providers` array, and pass the store as a prop:
 
 ```typescript title="main.ts"
-
-import { bootstrapApplication } from '@angular/platform-browser';
-import { AppComponent } from './app/app.component';
+import { bootstrapApplication } from "@angular/platform-browser";
+import { AppComponent } from "./app/app.component";
 // highlight-start
 import { provideRedux } from "angular-redux";
-import { store } from './store'
+import { store } from "./store";
 // highlight-end
 
 bootstrapApplication(AppComponent, {
   providers: [
     // highlight-next-line
-    provideRedux({ store })
-  ]
+    provideRedux({ store }),
+  ],
 });
 ```
 
@@ -87,10 +86,10 @@ Creating a slice requires a string name to identify the slice, an initial state
 Redux requires that [we write all state updates immutably, by making copies of data and updating the copies](https://redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow#immutability). However, Redux Toolkit's `createSlice` and `createReducer` APIs use [Immer](https://immerjs.github.io/immer/) inside to allow us to [write "mutating" update logic that becomes correct immutable updates](https://redux.js.org/tutorials/fundamentals/part-8-modern-redux#immutable-updates-with-immer).
 
 ```js title="features/counter/counterSlice.ts"
-import { createSlice } from '@reduxjs/toolkit'
+import { createSlice } from "@reduxjs/toolkit";
 
 export const counterSlice = createSlice({
-  name: 'counter',
+  name: "counter",
   initialState: {
     value: 0,
   },
@@ -101,68 +100,64 @@ export const counterSlice = createSlice({
       // which detects changes to a "draft state" and produces a brand new
       // immutable state based off those changes.
       // Also, no return statement is required from these functions.
-      state.value += 1
+      state.value += 1;
     },
     decrement: (state) => {
-      state.value -= 1
+      state.value -= 1;
     },
     incrementByAmount: (state, action) => {
-      state.value += action.payload
+      state.value += action.payload;
     },
   },
-})
+});
 
 // Action creators are generated for each case reducer function
-export const { increment, decrement, incrementByAmount } = counterSlice.actions
+export const { increment, decrement, incrementByAmount } = counterSlice.actions;
 
-export default counterSlice.reducer
+export default counterSlice.reducer;
 ```
 
 ### Add Slice Reducers to the Store
 
 Next, we need to import the reducer function from the counter slice and add it to our store. By defining a field inside the `reducer` parameter, we tell the store to use this slice reducer function to handle all updates to that state.
 
 ```js title="app/store.ts"
-import { configureStore } from '@reduxjs/toolkit'
+import { configureStore } from "@reduxjs/toolkit";
 // highlight-next-line
-import counterReducer from '../features/counter/counterSlice'
+import counterReducer from "../features/counter/counterSlice";
 
 export default configureStore({
   reducer: {
     // highlight-next-line
     counter: counterReducer,
   },
-})
+});
 ```
 
 ### Use Redux State and Actions in Angular Components
 
 Now we can use the Angular Redux inject functions to let Angular components interact with the Redux store. We can read data from the store with `useSelector`, and dispatch actions using `useDispatch`. Create a `src/features/counter/counter.component.ts` file with a `<app-counter>` component inside, then import that component into `app.component.ts` and render it inside of `<app-root>`.
 
 ```typescript title="features/counter/counter.component.ts"
-import { Component } from '@angular/core'
+import { Component } from "@angular/core";
 import { injectSelector, injectDispatch } from "@reduxjs/angular-redux";
-import { decrement, increment } from './store/counter-slice'
-import { RootState } from './store'
+import { decrement, increment } from "./store/counter-slice";
+import { RootState } from "./store";
 
 @Component({
-  selector: 'app-counter',
+  selector: "app-counter",
   standalone: true,
   template: `
-      <button (click)="dispatch(increment())">
-        Increment
-      </button>
-      <span>{{ count() }}</span>
-      <button (click)="dispatch(decrement())">
-        Decrement
-      </button>
-  `
+    <button (click)="dispatch(increment())">Increment</button>
+    <span>{{ count() }}</span>
+    <button (click)="dispatch(decrement())">Decrement</button>
+  `,
 })
 export class CounterComponent {
-  count = injectSelector((state: RootState) => state.counter.value)
-  dispatch = injectDispatch()
-  increment = increment
-  decrement = decrement
+  count = injectSelector((state: RootState) => state.counter.value);
+  dispatch = injectDispatch();
+  increment = increment;
+  decrement = decrement;
 }
 ```