Skip to content

Commit 691d940

Browse files
committedSep 2, 2024
chore: initial README
1 parent 438d3ee commit 691d940

File tree

1 file changed

+84
-14
lines changed

1 file changed

+84
-14
lines changed
 

‎README.md

+84-14
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,97 @@
1-
# AngularReduxWorkspace
1+
# Angular Redux
22

3-
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.2.
3+
Unofficial Angular bindings for [Redux](https://github.com/reduxjs/redux).
4+
Performant and flexible.
45

5-
## Development server
6+
# Features
67

7-
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
8+
- Compatible with Angular 18+
9+
- [Signals](https://angular.dev/guide/signals) support
10+
- [Redux Toolkit](https://redux-toolkit.js.org/) support
811

9-
## Code scaffolding
12+
# Usage
1013

11-
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
14+
The following Angular component works as-expected:
1215

13-
## Build
16+
```angular-ts
17+
import { Component } from '@angular/core'
18+
import {injectSelector, injectDispatch} from "angular-redux";
19+
import { decrement, increment, RootState } from './store/counter-slice'
1420
15-
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
21+
@Component({
22+
selector: 'app-root',
23+
standalone: true,
24+
imports: [],
25+
template: `
26+
<div>
27+
<div>
28+
<button
29+
aria-label="Increment value"
30+
(click)="dispatch(increment())"
31+
>
32+
Increment
33+
</button>
34+
<span>{{ count() }}</span>
35+
<button
36+
aria-label="Decrement value"
37+
(click)="dispatch(decrement())"
38+
>
39+
Decrement
40+
</button>
41+
</div>
42+
</div>
43+
`
44+
})
45+
export class AppComponent {
46+
count = injectSelector((state: RootState) => state.counter.value)
47+
dispatch = injectDispatch()
48+
increment = increment
49+
decrement = decrement
50+
}
51+
```
1652

17-
## Running unit tests
53+
Assuming the following `store.ts` file is present:
1854

19-
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
55+
```typescript
56+
import { PayloadAction, configureStore, createSlice } from '@reduxjs/toolkit'
2057

21-
## Running end-to-end tests
58+
export interface CounterState {
59+
value: number
60+
}
2261

23-
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
62+
const initialState: CounterState = {
63+
value: 0,
64+
}
2465

25-
## Further help
66+
export const counterSlice = createSlice({
67+
name: 'counter',
68+
initialState,
69+
reducers: {
70+
increment: (state) => {
71+
// Redux Toolkit allows us to write "mutating" logic in reducers. It
72+
// doesn't actually mutate the state because it uses the Immer library,
73+
// which detects changes to a "draft state" and produces a brand new
74+
// immutable state based off those changes
75+
state.value += 1
76+
},
77+
decrement: (state) => {
78+
state.value -= 1
79+
},
80+
incrementByAmount: (state, action: PayloadAction<number>) => {
81+
state.value += action.payload
82+
},
83+
},
84+
})
2685

27-
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
86+
// Action creators are generated for each case reducer function
87+
export const { increment, decrement, incrementByAmount } = counterSlice.actions
88+
89+
export const store = configureStore({
90+
reducer: {
91+
counter: counterSlice.reducer,
92+
},
93+
})
94+
95+
export type RootState = ReturnType<typeof store.getState>
96+
export type AppDispatch = typeof store.dispatch
97+
```

0 commit comments

Comments
 (0)
Please sign in to comment.