diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6423282..a83bec0 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -60,7 +60,6 @@ After you have submitted your pull request, we'll try to get back to you as soon Thank you for contributing! - # Cutting a release If you are a maintainer and want to cut a release, follow these steps: diff --git a/angular.json b/angular.json index e011b83..72c8107 100644 --- a/angular.json +++ b/angular.json @@ -139,9 +139,7 @@ "outputPath": "dist/angular-redux-injector-demo", "index": "projects/angular-redux-injector-demo/src/index.html", "browser": "projects/angular-redux-injector-demo/src/main.ts", - "polyfills": [ - "zone.js" - ], + "polyfills": ["zone.js"], "tsConfig": "projects/angular-redux-injector-demo/tsconfig.app.json", "assets": [ { @@ -149,9 +147,7 @@ "input": "projects/angular-redux-injector-demo/public" } ], - "styles": [ - "projects/angular-redux-injector-demo/src/styles.css" - ], + "styles": ["projects/angular-redux-injector-demo/src/styles.css"], "scripts": [] }, "configurations": { diff --git a/projects/angular-redux-injector-demo/src/app/utils/async-run-in-injection-context.ts b/projects/angular-redux-injector-demo/src/app/utils/async-run-in-injection-context.ts index e188b4e..2afb025 100644 --- a/projects/angular-redux-injector-demo/src/app/utils/async-run-in-injection-context.ts +++ b/projects/angular-redux-injector-demo/src/app/utils/async-run-in-injection-context.ts @@ -17,8 +17,6 @@ export const asyncRunInInjectionContext = ( }); }; -export type RunInInjectionContextProps< - T extends object, -> = T & { +export type RunInInjectionContextProps = T & { injector: EnvironmentInjector; }; diff --git a/projects/angular-redux-injector-demo/src/index.html b/projects/angular-redux-injector-demo/src/index.html index b17f9d3..6a09d2f 100644 --- a/projects/angular-redux-injector-demo/src/index.html +++ b/projects/angular-redux-injector-demo/src/index.html @@ -1,13 +1,13 @@ - - - AngularReduxInjectorDemo - - - - - - - + + + AngularReduxInjectorDemo + + + + + + + diff --git a/projects/angular-redux-injector-demo/src/main.ts b/projects/angular-redux-injector-demo/src/main.ts index 35b00f3..8882c45 100644 --- a/projects/angular-redux-injector-demo/src/main.ts +++ b/projects/angular-redux-injector-demo/src/main.ts @@ -2,5 +2,6 @@ import { bootstrapApplication } from '@angular/platform-browser'; import { appConfig } from './app/app.config'; import { AppComponent } from './app/app.component'; -bootstrapApplication(AppComponent, appConfig) - .catch((err) => console.error(err)); +bootstrapApplication(AppComponent, appConfig).catch((err) => + console.error(err), +); diff --git a/projects/angular-redux-injector-demo/tsconfig.app.json b/projects/angular-redux-injector-demo/tsconfig.app.json index e40712b..3f672cc 100644 --- a/projects/angular-redux-injector-demo/tsconfig.app.json +++ b/projects/angular-redux-injector-demo/tsconfig.app.json @@ -6,10 +6,6 @@ "outDir": "../../out-tsc/app", "types": [] }, - "files": [ - "src/main.ts" - ], - "include": [ - "src/**/*.d.ts" - ] + "files": ["src/main.ts"], + "include": ["src/**/*.d.ts"] } diff --git a/projects/angular-redux/src/lib/inject-selector.ts b/projects/angular-redux/src/lib/inject-selector.ts index b634768..d0c3c71 100644 --- a/projects/angular-redux/src/lib/inject-selector.ts +++ b/projects/angular-redux/src/lib/inject-selector.ts @@ -1,6 +1,7 @@ import { EqualityFn } from './types'; import { assertInInjectionContext, + DestroyRef, effect, inject, Signal, @@ -80,6 +81,7 @@ export function createSelectorInjection(): InjectSelector { ): Signal => { assertInInjectionContext(injectSelector); const reduxContext = inject(ReduxProvider); + const destroyRef = inject(DestroyRef); const { equalityFn = refEquality } = typeof equalityFnOrOptions === 'function' @@ -90,19 +92,17 @@ export function createSelectorInjection(): InjectSelector { const selectedState = signal(selector(store.getState())); - effect((onCleanup) => { - const unsubscribe = subscription.addNestedSub(() => { - const data = selector(store.getState()); - if (equalityFn(selectedState(), data)) { - return; - } + const unsubscribe = subscription.addNestedSub(() => { + const data = selector(store.getState()); + if (equalityFn(selectedState(), data)) { + return; + } - selectedState.set(data); - }); + selectedState.set(data); + }); - onCleanup(() => { - unsubscribe(); - }); + destroyRef.onDestroy(() => { + unsubscribe(); }); return selectedState; diff --git a/projects/angular-redux/src/tests/inject-selector-and-dispatch.spec.ts b/projects/angular-redux/src/tests/inject-selector-and-dispatch.spec.ts index 61272ce..8430b61 100644 --- a/projects/angular-redux/src/tests/inject-selector-and-dispatch.spec.ts +++ b/projects/angular-redux/src/tests/inject-selector-and-dispatch.spec.ts @@ -1,9 +1,10 @@ import { Component } from '@angular/core'; -import { render } from '@testing-library/angular'; +import { render, waitFor } from '@testing-library/angular'; import '@testing-library/jest-dom'; import { configureStore, createSlice } from '@reduxjs/toolkit'; import { provideRedux, injectDispatch, injectSelector } from '../public-api'; import { userEvent } from '@testing-library/user-event'; +import { createStore } from 'redux'; const user = userEvent.setup(); @@ -70,3 +71,32 @@ it('injectSelector should work with reactivity', async () => { expect(getByText('Count: 1')).toBeInTheDocument(); }); + +it('should show a value dispatched during ngOnInit', async () => { + const store = configureStore({ + reducer: { + counter: counterSlice.reducer, + }, + }); + + @Component({ + selector: 'app-root', + standalone: true, + template: '

Count: {{count()}}

', + }) + class Comp { + count = injectSelector((state: any) => state.counter.value); + dispatch = injectDispatch(); + increment = counterSlice.actions.increment; + + ngOnInit() { + this.dispatch(this.increment()); + } + } + + const { getByText } = await render(Comp, { + providers: [provideRedux({ store })], + }); + + await waitFor(() => expect(getByText('Count: 1')).toBeInTheDocument()); +});