# Aurelia Store Change Handler called with undefined

**URL:** <https://discourse.aurelia.io/t/aurelia-store-change-handler-called-with-undefined/4968>\
**Category:** Help Requests\
**Created:** [November 8, 2022, 8:53pm UTC](https://discourse.aurelia.io/t/aurelia-store-change-handler-called-with-undefined/4968 "2022-11-08T20:53:51Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![coder](https://avatars.discourse-cdn.com/v4/letter/c/9de0a6/32.png) [@coder](https://discourse.aurelia.io/u/coder)\
**Post date:** [November 8, 2022, 8:53pm UTC](https://discourse.aurelia.io/t/aurelia-store-change-handler-called-with-undefined/4968/1 "2022-11-08T20:53:51Z")

</div>

Hello again,

I’m testing a component bind method that depends on some data it receives through `myDataChanged`.

The problem is under test. When calling `myClass.bind()` under test, `myDataChanged` is called with arg of `undefined` before `bind`. Because bind depends on this value, the test can’t pass.

Are there any problems with this code?

Heres an anonymised snippet of the component.

```auto
@connectTo({
	selector: {
		myData: (store) => store.state.pipe(pluck("myData"), distinctUntilChanged()),
	}
});

export class MyClass {

constructor(
	private store: Store<State>,
	private eventAggregator: EventAggregator,
	private configManager: ConfigManager
) {}

private myDataChanged(newState: myDataModel) {
	this.myData = newState;
}

private bind() {
	this.result = computeSomething(this.myData);
}

```

Snippet of the test:

```auto
import { Store } from "aurelia-store";
import { skip } from "rxjs/operators";
import { Container } from "aurelia-dependency-injection";
import { State } from "model";
import { MyClass } from "./MyClass";
import { EventAggregator } from "aurelia-event-aggregator";
import ConfigManager from "./config-manager";

describe("myClass section", () => {
	let container: Container;
	let store: Store<State>;
	let myClass: MyClass;
	let eventAggregatorMock: EventAggregator = new EventAggregator();

	beforeEach(async (done) => {
		container = new Container().makeGlobal();
		// Create a store
		store = new Store({ myData: { id: 1 }});
		container.registerInstance(Store, store);
		// Instantiate new ConfigManager with container deps
		const configManager: ConfigManager = new ConfigManager();
		container.registerInstance(ConfigManager, configManager);
		await configManager.init();
		// Register remaining deps
		container.registerInstance(EventAggregator, eventAggregatorMock);
		// Get MyClass page
		myClass = container.get(MyClass);
		done();
	});

	it("should do something in bind", async (done) => {
		// @ts-ignore
		myClass.bind();
		// @ts-ignore
		expect(myClass.result).toEqual(false);
		done();
	});

```

---

<div class="post-metadata">

**Author:** ![coder](https://avatars.discourse-cdn.com/v4/letter/c/9de0a6/32.png) [@coder](https://discourse.aurelia.io/u/coder)\
**Post date:** [November 10, 2022, 9:58pm UTC](https://discourse.aurelia.io/t/aurelia-store-change-handler-called-with-undefined/4968/2 "2022-11-10T21:58:26Z")

</div>

Update. The test and `MyClass` have the same instance of the `Store`. I’ve discovered another issue in another test in this suite (not in the snippet) which is calling `dispatchify`. When the execution enters `aurelia-store` [no action](https://github.com/aurelia/store/blob/master/dist/commonjs/aurelia-store.js#L282) can be found. When I check the store that is reference in the test and `MyClass`, the action is registered. Am I setting up the `container` for the test incorrectly because it looks like `aurelia-store` somehow has a different `Store` value?

I think these issues are probably related.

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [November 13, 2022, 7:21am UTC](https://discourse.aurelia.io/t/aurelia-store-change-handler-called-with-undefined/4968/3 "2022-11-13T07:21:33Z")

</div>

here is a sample of the internal unit tests, perhaps this clarifies your issue.

> <https://github.com/aurelia/store/blob/60802bf68325b00bb652f401aa7e19fb12bca529/test/unit/decorator.spec.ts#L49>

---

<div class="post-metadata">

**Author:** ![coder](https://avatars.discourse-cdn.com/v4/letter/c/9de0a6/32.png) [@coder](https://discourse.aurelia.io/u/coder)\
**Post date:** [November 15, 2022, 11:19pm UTC](https://discourse.aurelia.io/t/aurelia-store-change-handler-called-with-undefined/4968/4 "2022-11-15T23:19:06Z")

</div>

Thanks zewa666, yes this does clarify that the expected behaviour of the store. Specifically the bind method is required for the prop & store to be available.

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [November 16, 2022, 5:46pm UTC](https://discourse.aurelia.io/t/aurelia-store-change-handler-called-with-undefined/4968/5 "2022-11-16T17:46:47Z")

</div>

yep unless you rewire it to a different hook. but bind is the default one