Skip to content

Commit 32cfe7b

Browse files
committed
docs: adapt intro/getting-started to Angular Redux
1 parent 1a92641 commit 32cfe7b

File tree

1 file changed

+68
-104
lines changed

1 file changed

+68
-104
lines changed

docs/introduction/getting-started.md

Lines changed: 68 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -6,145 +6,109 @@ sidebar_label: Getting Started
66
description: 'Introduction > Getting Started: First steps with Angular Redux'
77
---
88

9-
 
9+
# Getting Started with Angular Redux
1010

11-
import LiteYouTubeEmbed from 'react-lite-youtube-embed';
12-
import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'
13-
14-
# Getting Started with React Redux
15-
16-
[React Redux](https://github.com/reduxjs/react-redux) is the official [React](https://react.dev/) UI bindings layer for [Redux](https://redux.js.org/). It lets your React components read data from a Redux store, and dispatch actions to the store to update state.
11+
[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.
1712

1813
## Installation
1914

20-
React Redux 8.x requires **React 16.8.3 or later** / **React Native 0.59 or later**, in order to make use of React Hooks.
15+
Angular Redux 8.x requires **Angular 17.3 or later**, in order to make use of Angular Signals.
2116

22-
### Create a React Redux App
17+
### Installing with `ng add`
2318

24-
The recommended way to start new apps with React and Redux is by using [our official Redux+TS template for Vite](https://github.com/reduxjs/redux-templates), or by creating a new Next.js project using [Next's `with-redux` template](https://github.com/vercel/next.js/tree/canary/examples/with-redux).
19+
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>:
2520

26-
Both of these already have Redux Toolkit and React-Redux configured appropriately for that build tool, and come with a small example app that demonstrates how to use several of Redux Toolkit's features.
21+
```sh
22+
ng add @reduxjs/angular-redux@latest
23+
```
2724

28-
```bash
29-
# Vite with our Redux+TS template
30-
# (using the `degit` tool to clone and extract the template)
31-
npx degit reduxjs/redux-templates/packages/vite-template-redux my-app
25+
#### Optional `ng add` flags
3226

33-
# Next.js using the `with-redux` template
34-
npx create-next-app --example with-redux my-app
35-
```
27+
| flag | description | value type | default value |
28+
|---------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------|---------------|
29+
| `--path` | Path to the module that you wish to add the import for the `provideRedux` to. | `string` ||
30+
| `--project` | Name of the project defined in your `angular.json` to help locating the module to add the `provideRedux` to. | `string` ||
31+
| `--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` |
32+
| `--storePath` | The file path to create the state in. | `string` | `store` |
3633

37-
We do not currently have official React Native templates, but recommend these templates for standard React Native and for Expo:
34+
This command will automate the following steps:
3835

39-
- https://github.com/rahsheen/react-native-template-redux-typescript
40-
- https://github.com/rahsheen/expo-template-redux-typescript
36+
1. Update `package.json` > `dependencies` with Redux, Redux Toolkit, and Angular Redux
37+
2. Run `npm install` to install those dependencies.
38+
3. Update your `src/app/app.module.ts` > `imports` array with `provideRedux({store})`
39+
4. If the project is using a `standalone bootstrap`, it adds `provideRedux({store})` into the application config.
4140

42-
### An Existing React App
41+
### Installing with `npm` or `yarn`
4342

44-
To use React Redux with your React app, install it as a dependency:
43+
To use Angular Redux with your Angular app, install it as a dependency:
4544

4645
```bash
4746
# If you use npm:
48-
npm install react-redux
47+
npm install @reduxjs/angular-redux
4948

5049
# Or if you use Yarn:
51-
yarn add react-redux
50+
yarn add @reduxjs/angular-redux
5251
```
5352

53+
5454
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.
5555

56-
React-Redux v8 is written in TypeScript, so all types are automatically included.
56+
Angular-Redux is written in TypeScript, so all types are automatically included.
5757

5858
## API Overview
5959

60-
### `Provider`
61-
62-
React Redux includes a `<Provider />` component, which makes the Redux store available to the rest of your app:
63-
64-
```jsx
65-
import React from 'react'
66-
import ReactDOM from 'react-dom/client'
60+
### `provideRedux`
6761

68-
import { Provider } from 'react-redux'
69-
import store from './store'
62+
Angular Redux includes a `provideRedux` provider factory, which makes the Redux store available to the rest of your app:
7063

71-
import App from './App'
64+
```typescript
65+
import { bootstrapApplication } from '@angular/platform-browser';
66+
import { provideRedux } from "angular-redux";
67+
import { AppComponent } from './app/app.component';
68+
import { store } from './store'
7269

73-
// As of React 18
74-
const root = ReactDOM.createRoot(document.getElementById('root'))
75-
root.render(
76-
<Provider store={store}>
77-
<App />
78-
</Provider>,
79-
)
70+
bootstrapApplication(AppComponent, {
71+
providers: [
72+
provideRedux({ store })
73+
]
74+
});
8075
```
8176

82-
### Hooks
83-
84-
React Redux provides a pair of custom React hooks that allow your React components to interact with the Redux store.
85-
86-
`useSelector` reads a value from the store state and subscribes to updates, while `useDispatch` returns the store's `dispatch` method to let you dispatch actions.
87-
88-
```jsx
89-
import React from 'react'
90-
import { useSelector, useDispatch } from 'react-redux'
91-
import {
92-
decrement,
93-
increment,
94-
incrementByAmount,
95-
incrementAsync,
96-
selectCount,
97-
} from './counterSlice'
98-
import styles from './Counter.module.css'
99-
100-
export function Counter() {
101-
const count = useSelector(selectCount)
102-
const dispatch = useDispatch()
103-
104-
return (
105-
<div>
106-
<div className={styles.row}>
107-
<button
108-
className={styles.button}
109-
aria-label="Increment value"
110-
onClick={() => dispatch(increment())}
111-
>
112-
+
113-
</button>
114-
<span className={styles.value}>{count}</span>
115-
<button
116-
className={styles.button}
117-
aria-label="Decrement value"
118-
onClick={() => dispatch(decrement())}
119-
>
120-
-
121-
</button>
122-
</div>
123-
{/* omit additional rendering output here */}
124-
</div>
125-
)
77+
### Injectables
78+
79+
Angular Redux provides a pair of custom Angular injectable functions that allow your Angular components to interact with the Redux store.
80+
81+
`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.
82+
83+
```typescript
84+
import { Component } from '@angular/core'
85+
import { injectSelector, injectDispatch } from "@reduxjs/angular-redux";
86+
import { decrement, increment } from './store/counter-slice'
87+
import { RootState } from './store'
88+
89+
@Component({
90+
selector: 'app-root',
91+
standalone: true,
92+
template: `
93+
<button (click)="dispatch(increment())">
94+
Increment
95+
</button>
96+
<span>{{ count() }}</span>
97+
<button (click)="dispatch(decrement())">
98+
Decrement
99+
</button>
100+
`
101+
})
102+
export class AppComponent {
103+
count = injectSelector((state: RootState) => state.counter.value)
104+
dispatch = injectDispatch()
105+
increment = increment
106+
decrement = decrement
126107
}
127108
```
128109

129-
## Learning React Redux
130-
131-
### Learn Modern Redux Livestream
132-
133-
Redux maintainer Mark Erikson appeared on the "Learn with Jason" show to explain how we recommend using Redux today. The show includes a live-coded example app that shows how to use Redux Toolkit and React-Redux hooks with Typescript, as well as the new RTK Query data fetching APIs.
134-
135-
See [the "Learn Modern Redux" show notes page](https://www.learnwithjason.dev/let-s-learn-modern-redux) for a transcript and links to the example app source.
136-
137-
<LiteYouTubeEmbed
138-
id="9zySeP5vH9c"
139-
title="Learn Modern Redux - Redux Toolkit, React-Redux Hooks, and RTK Query"
140-
/>
141-
142110
## Help and Discussion
143111

144112
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!
145113

146114
You can also ask questions on [Stack Overflow](https://stackoverflow.com) using the **[#redux tag](https://stackoverflow.com/questions/tagged/redux)**.
147-
148-
## Docs Translations
149-
150-
- [Portuguese](https://fernandobelotto.github.io/react-redux)

0 commit comments

Comments
 (0)