|
3 | 3 | Official Angular bindings for [Redux](https://github.com/reduxjs/redux).
|
4 | 4 | Performant and flexible.
|
5 | 5 |
|
| 6 | + |
| 7 | + [](https://www.npmjs.com/package/@reduxjs/angular) |
| 8 | +[](https://www.npmjs.com/package/@reduxjs/angular) |
| 9 | + |
6 | 10 | > [!WARNING]
|
7 | 11 | > This package is in alpha and is rapidly developing.
|
8 | 12 |
|
9 |
| -# Features |
| 13 | +## Installation |
| 14 | + |
| 15 | +Angular Redux requires **Angular 17.3 or later**. |
10 | 16 |
|
11 |
| -- Compatible with Angular 18+ |
12 |
| -- [Signals](https://angular.dev/guide/signals) support |
13 |
| -- [Redux Toolkit](https://redux-toolkit.js.org/) support |
| 17 | +To use React Redux with your Angular app, install it as a dependency: |
| 18 | + |
| 19 | +```bash |
| 20 | +# If you use npm: |
| 21 | +npm install @reduxjs/angular-redux |
| 22 | + |
| 23 | +# Or if you use Yarn: |
| 24 | +yarn add @reduxjs/angular-redux |
| 25 | +``` |
| 26 | + |
| 27 | +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. |
| 28 | + |
| 29 | +This assumes that you’re using [npm](http://npmjs.com/) package manager |
| 30 | +with a module bundler like [Webpack](https://webpack.js.org/) or |
| 31 | +[Browserify](http://browserify.org/) to consume [CommonJS |
| 32 | +modules](https://webpack.js.org/api/module-methods/#commonjs). |
14 | 33 |
|
15 | 34 | # Usage
|
16 | 35 |
|
17 | 36 | The following Angular component works as-expected:
|
18 | 37 |
|
19 | 38 | ```angular-ts
|
20 | 39 | import { Component } from '@angular/core'
|
21 |
| -import {injectSelector, injectDispatch} from "angular-redux"; |
| 40 | +import {injectSelector, injectDispatch} from "@reduxjs/angular-redux"; |
22 | 41 | import { decrement, increment, RootState } from './store/counter-slice'
|
23 | 42 |
|
24 | 43 | @Component({
|
@@ -52,49 +71,3 @@ export class AppComponent {
|
52 | 71 | decrement = decrement
|
53 | 72 | }
|
54 | 73 | ```
|
55 |
| - |
56 |
| -Assuming the following `store.ts` file is present: |
57 |
| - |
58 |
| -```typescript |
59 |
| -import { PayloadAction, configureStore, createSlice } from '@reduxjs/toolkit' |
60 |
| - |
61 |
| -export interface CounterState { |
62 |
| - value: number |
63 |
| -} |
64 |
| - |
65 |
| -const initialState: CounterState = { |
66 |
| - value: 0, |
67 |
| -} |
68 |
| - |
69 |
| -export const counterSlice = createSlice({ |
70 |
| - name: 'counter', |
71 |
| - initialState, |
72 |
| - reducers: { |
73 |
| - increment: (state) => { |
74 |
| - // Redux Toolkit allows us to write "mutating" logic in reducers. It |
75 |
| - // doesn't actually mutate the state because it uses the Immer library, |
76 |
| - // which detects changes to a "draft state" and produces a brand new |
77 |
| - // immutable state based off those changes |
78 |
| - state.value += 1 |
79 |
| - }, |
80 |
| - decrement: (state) => { |
81 |
| - state.value -= 1 |
82 |
| - }, |
83 |
| - incrementByAmount: (state, action: PayloadAction<number>) => { |
84 |
| - state.value += action.payload |
85 |
| - }, |
86 |
| - }, |
87 |
| -}) |
88 |
| - |
89 |
| -// Action creators are generated for each case reducer function |
90 |
| -export const { increment, decrement, incrementByAmount } = counterSlice.actions |
91 |
| - |
92 |
| -export const store = configureStore({ |
93 |
| - reducer: { |
94 |
| - counter: counterSlice.reducer, |
95 |
| - }, |
96 |
| -}) |
97 |
| - |
98 |
| -export type RootState = ReturnType<typeof store.getState> |
99 |
| -export type AppDispatch = typeof store.dispatch |
100 |
| -``` |
0 commit comments