Merge pull request #10 from reduxjs/website

Website and initial docs

docs/introduction/getting-started.md

@@ -0,0 +1,114 @@
+---
+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'
+---
+
+# Getting Started with Angular Redux
+
+[Angular Redux](https://github.com/reduxjs/angular-redux) is the official [Angular](https://angular.dev/) UI bindings layer for [Redux](https://redux.js.org/). It lets your Angular components read data from a Redux store, and dispatch actions to the store to update state.
+
+## Installation
+
+Angular Redux 8.x requires **Angular 17.3 or later**, in order to make use of Angular Signals.
+
+### Installing with `ng add`
+
+You can install the Store to your project with the following `ng add` command <a href="https://angular.dev/cli/add" target="_blank">(details here)</a>:
+
+```sh
+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`   ||
+| `--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`       |
+
+This command will automate the following steps:
+
+1. Update `package.json` > `dependencies` with Redux, Redux Toolkit, and Angular Redux
+2. Run `npm install` to install those dependencies.
+3. Update your `src/app/app.module.ts` > `imports` array with `provideRedux({store})`
+4. If the project is using a `standalone bootstrap`, it adds `provideRedux({store})` into the application config.
+
+### Installing with `npm` or `yarn`
+
+To use Angular Redux with your Angular app, install it as a dependency:
+
+```bash
+# If you use npm:
+npm install @reduxjs/angular-redux
+
+# Or if you use Yarn:
+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.
+
+## API Overview
+
+### `provideRedux`
+
+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 { provideRedux } from "angular-redux";
+import { AppComponent } from './app/app.component';
+import { store } from './store'
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideRedux({ store })
+  ]
+});
+```
+
+### Injectables
+
+Angular Redux provides a pair of custom Angular injectable functions that allow your Angular components to interact with the Redux store.
+
+`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 { injectSelector, injectDispatch } from "@reduxjs/angular-redux";
+import { decrement, increment } from './store/counter-slice'
+import { RootState } from './store'
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  template: `
+      <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
+}
+```
+
+## Help and Discussion
+
+The **[#redux channel](https://discord.gg/0ZcbPKXt5bZ6au5t)** of the **[Reactiflux Discord community](http://www.reactiflux.com)** is our official resource for all questions related to learning and using Redux. Reactiflux is a great place to hang out, ask questions, and learn - come join us!
+
+You can also ask questions on [Stack Overflow](https://stackoverflow.com) using the **[#redux tag](https://stackoverflow.com/questions/tagged/redux)**.

docs/tutorials/quick-start.md

@@ -0,0 +1,211 @@
+---
+id: quick-start
+title: Quick Start
+sidebar_label: Quick Start
+hide_title: true
+---
+
+ 
+
+# Angular Redux Quick Start
+
+:::tip What You'll Learn
+
+- How to set up and use Redux Toolkit with Angular Redux
+
+:::
+
+:::info Prerequisites
+
+- Familiarity with [ES6 syntax and features](https://www.taniarascia.com/es6-syntax-and-feature-overview/)
+- Knowledge of Angular terminology: [State](https://angular.dev/essentials/managing-dynamic-data), [Components, Props](https://angular.dev/essentials/components), and [Signals](https://angular.dev/guide/signals)
+- Understanding of [Redux terms and concepts](https://redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow)
+
+:::
+
+## Introduction
+
+Welcome to the Angular Redux Quick Start tutorial! **This tutorial will briefly introduce you to Angular Redux and teach you how to start using it correctly**.
+
+### How to Read This Tutorial
+
+This page will focus on just how to set up a Redux application with Redux Toolkit and the main APIs you'll use. For explanations of what Redux is, how it works, and full examples of how to use Redux Toolkit, see [the Redux core docs tutorials](https://redux.js.org/tutorials/index).
+
+For this tutorial, we assume that you're using Redux Toolkit and Angular Redux together, as that is the standard Redux usage pattern. The examples are based on [a typical Angular CLI folder structure](https://angular.dev/tools/cli) where all the application code is in a `src`, but the patterns can be adapted to whatever project or folder setup you're using.
+
+## Usage Summary
+
+### Install Redux Toolkit and Angular Redux
+
+Add the Redux Toolkit and Angular Redux packages to your project:
+
+```sh
+npm install @reduxjs/toolkit angular-redux
+```
+
+### Create a Redux Store
+
+Create a file named `src/app/store.js`. Import the `configureStore` API from Redux Toolkit. We'll start by creating an empty Redux store, and exporting it:
+
+```typescript title="app/store.js"
+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.
+
+### Provide the Redux Store to Angular
+
+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';
+// highlight-start
+import { provideRedux } from "angular-redux";
+import { store } from './store'
+// highlight-end
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    // highlight-next-line
+    provideRedux({ store })
+  ]
+});
+```
+
+### Create a Redux State Slice
+
+Add a new file named `src/features/counter/counterSlice.js`. In that file, import the `createSlice` API from Redux Toolkit.
+
+Creating a slice requires a string name to identify the slice, an initial state value, and one or more reducer functions to define how the state can be updated. Once a slice is created, we can export the generated Redux action creators and the reducer function for the whole slice.
+
+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.js"
+import { createSlice } from '@reduxjs/toolkit'
+
+export const counterSlice = createSlice({
+  name: 'counter',
+  initialState: {
+    value: 0,
+  },
+  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.
+      // Also, no return statement is required from these functions.
+      state.value += 1
+    },
+    decrement: (state) => {
+      state.value -= 1
+    },
+    incrementByAmount: (state, action) => {
+      state.value += action.payload
+    },
+  },
+})
+
+// Action creators are generated for each case reducer function
+export const { increment, decrement, incrementByAmount } = counterSlice.actions
+
+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.js"
+import { configureStore } from '@reduxjs/toolkit'
+// highlight-next-line
+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 { injectSelector, injectDispatch } from "@reduxjs/angular-redux";
+import { decrement, increment } from './store/counter-slice'
+import { RootState } from './store'
+
+@Component({
+  selector: 'app-counter',
+  standalone: true,
+  template: `
+      <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
+}
+```
+
+Now, any time you click the "Increment" and "Decrement buttons:
+
+- The corresponding Redux action will be dispatched to the store
+- The counter slice reducer will see the actions and update its state
+- The `<app-counter>` component will see the new state value from the store and re-render itself with the new data
+
+## What You've Learned
+
+That was a brief overview of how to set up and use Redux Toolkit with Angular. Recapping the details:
+
+:::tip Summary
+
+- **Create a Redux store with `configureStore`**
+  - `configureStore` accepts a `reducer` function as a named argument
+  - `configureStore` automatically sets up the store with good default settings
+- **Provide the Redux store to the Angular application components**
+  - Put a Angular Redux `provideRedux` provider factory in your `bootstrapApplication`'s `providers` array
+  - Pass the Redux store as `<Provider store={store}>`
+- **Create a Redux "slice" reducer with `createSlice`**
+  - Call `createSlice` with a string name, an initial state, and named reducer functions
+  - Reducer functions may "mutate" the state using Immer
+  - Export the generated slice reducer and action creators
+- **Use the Angular Redux `injectSelector/injectDispatch` injections in Angular components**
+  - Read data from the store with the `injectSelector` injection
+  - Get the `dispatch` function with the `injectDispatch` injection, and dispatch actions as needed
+
+:::
+
+### Full Counter App Example
+
+Here's the complete Counter application as a running CodeSandbox:
+
+<iframe
+  class="codesandbox"
+  src="https://codesandbox.io/embed/github/reduxjs/redux-essentials-counter-example/tree/master/?fontsize=14&hidenavigation=1&module=%2Fsrc%2Ffeatures%2Fcounter%2FcounterSlice.js&theme=dark&runonclick=1"
+  title="redux-essentials-example"
+  allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
+  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+></iframe>
+
+## What's Next?
+
+We recommend going through [**the "Redux Essentials" and "Redux Fundamentals" tutorials in the Redux core docs**](https://redux.js.org/tutorials/index), which will give you a complete understanding of how Redux works, what Redux Toolkit and Angular Redux do, and how to use it correctly.