|
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