Skip to content

Commit a5919b3

Browse files
crutchcorncrutchcorn
authored
Merge pull request #14 from reduxjs/fix-lifecycle-method-usage
Fix lifecycle method usage
2 parents 0fbe8f3 + 077115e commit a5919b3

File tree

8 files changed

+60
-40
lines changed

8 files changed

+60
-40
lines changed

Diff for: ‎CONTRIBUTING.md

-1
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,6 @@ After you have submitted your pull request, we'll try to get back to you as soon
6060

6161
Thank you for contributing!
6262

63-
6463
# Cutting a release
6564

6665
If you are a maintainer and want to cut a release, follow these steps:

Diff for: ‎angular.json

+2-6
Original file line numberDiff line numberDiff line change
@@ -139,19 +139,15 @@
139139
"outputPath": "dist/angular-redux-injector-demo",
140140
"index": "projects/angular-redux-injector-demo/src/index.html",
141141
"browser": "projects/angular-redux-injector-demo/src/main.ts",
142-
"polyfills": [
143-
"zone.js"
144-
],
142+
"polyfills": ["zone.js"],
145143
"tsConfig": "projects/angular-redux-injector-demo/tsconfig.app.json",
146144
"assets": [
147145
{
148146
"glob": "**/*",
149147
"input": "projects/angular-redux-injector-demo/public"
150148
}
151149
],
152-
"styles": [
153-
"projects/angular-redux-injector-demo/src/styles.css"
154-
],
150+
"styles": ["projects/angular-redux-injector-demo/src/styles.css"],
155151
"scripts": []
156152
},
157153
"configurations": {

Diff for: ‎projects/angular-redux-injector-demo/src/app/utils/async-run-in-injection-context.ts

+1-3
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,6 @@ export const asyncRunInInjectionContext = <TReturn>(
1717
});
1818
};
1919

20-
export type RunInInjectionContextProps<
21-
T extends object,
22-
> = T & {
20+
export type RunInInjectionContextProps<T extends object> = T & {
2321
injector: EnvironmentInjector;
2422
};

Diff for: ‎projects/angular-redux-injector-demo/src/index.html

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<title>AngularReduxInjectorDemo</title>
6-
<base href="/">
7-
<meta name="viewport" content="width=device-width, initial-scale=1">
8-
<link rel="icon" type="image/x-icon" href="favicon.ico">
9-
</head>
10-
<body>
11-
<app-root></app-root>
12-
</body>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>AngularReduxInjectorDemo</title>
6+
<base href="/" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<link rel="icon" type="image/x-icon" href="favicon.ico" />
9+
</head>
10+
<body>
11+
<app-root></app-root>
12+
</body>
1313
</html>

Diff for: ‎projects/angular-redux-injector-demo/src/main.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,6 @@ import { bootstrapApplication } from '@angular/platform-browser';
22
import { appConfig } from './app/app.config';
33
import { AppComponent } from './app/app.component';
44

5-
bootstrapApplication(AppComponent, appConfig)
6-
.catch((err) => console.error(err));
5+
bootstrapApplication(AppComponent, appConfig).catch((err) =>
6+
console.error(err),
7+
);

Diff for: ‎projects/angular-redux-injector-demo/tsconfig.app.json

+2-6
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,6 @@
66
"outDir": "../../out-tsc/app",
77
"types": []
88
},
9-
"files": [
10-
"src/main.ts"
11-
],
12-
"include": [
13-
"src/**/*.d.ts"
14-
]
9+
"files": ["src/main.ts"],
10+
"include": ["src/**/*.d.ts"]
1511
}

Diff for: ‎projects/angular-redux/src/lib/inject-selector.ts

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { EqualityFn } from './types';
22
import {
33
assertInInjectionContext,
4+
DestroyRef,
45
effect,
56
inject,
67
Signal,
@@ -80,6 +81,7 @@ export function createSelectorInjection(): InjectSelector {
8081
): Signal<Selected> => {
8182
assertInInjectionContext(injectSelector);
8283
const reduxContext = inject(ReduxProvider);
84+
const destroyRef = inject(DestroyRef);
8385

8486
const { equalityFn = refEquality } =
8587
typeof equalityFnOrOptions === 'function'
@@ -90,19 +92,17 @@ export function createSelectorInjection(): InjectSelector {
9092

9193
const selectedState = signal(selector(store.getState()));
9294

93-
effect((onCleanup) => {
94-
const unsubscribe = subscription.addNestedSub(() => {
95-
const data = selector(store.getState());
96-
if (equalityFn(selectedState(), data)) {
97-
return;
98-
}
95+
const unsubscribe = subscription.addNestedSub(() => {
96+
const data = selector(store.getState());
97+
if (equalityFn(selectedState(), data)) {
98+
return;
99+
}
99100

100-
selectedState.set(data);
101-
});
101+
selectedState.set(data);
102+
});
102103

103-
onCleanup(() => {
104-
unsubscribe();
105-
});
104+
destroyRef.onDestroy(() => {
105+
unsubscribe();
106106
});
107107

108108
return selectedState;

Diff for: ‎projects/angular-redux/src/tests/inject-selector-and-dispatch.spec.ts

+31-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { Component } from '@angular/core';
2-
import { render } from '@testing-library/angular';
2+
import { render, waitFor } from '@testing-library/angular';
33
import '@testing-library/jest-dom';
44
import { configureStore, createSlice } from '@reduxjs/toolkit';
55
import { provideRedux, injectDispatch, injectSelector } from '../public-api';
66
import { userEvent } from '@testing-library/user-event';
7+
import { createStore } from 'redux';
78

89
const user = userEvent.setup();
910

@@ -70,3 +71,32 @@ it('injectSelector should work with reactivity', async () => {
7071

7172
expect(getByText('Count: 1')).toBeInTheDocument();
7273
});
74+
75+
it('should show a value dispatched during ngOnInit', async () => {
76+
const store = configureStore({
77+
reducer: {
78+
counter: counterSlice.reducer,
79+
},
80+
});
81+
82+
@Component({
83+
selector: 'app-root',
84+
standalone: true,
85+
template: '<p>Count: {{count()}}</p>',
86+
})
87+
class Comp {
88+
count = injectSelector((state: any) => state.counter.value);
89+
dispatch = injectDispatch();
90+
increment = counterSlice.actions.increment;
91+
92+
ngOnInit() {
93+
this.dispatch(this.increment());
94+
}
95+
}
96+
97+
const { getByText } = await render(Comp, {
98+
providers: [provideRedux({ store })],
99+
});
100+
101+
await waitFor(() => expect(getByText('Count: 1')).toBeInTheDocument());
102+
});

0 commit comments

Comments
 (0)