diff --git a/src/store.ts b/src/store.ts
index 93af6529..de4cbf21 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -30,6 +30,12 @@ export function connect(mapStateToProps) {
super.willUnmount();
}
updateProps(nextProps, forceUpdate) {
+ if (this.__widget__.ownProps !== nextProps) {
+ this.__widget__.currentStoreProps = mapStateToProps(
+ this.env.store.state,
+ nextProps
+ );
+ }
this.__widget__.ownProps = nextProps;
const mergedProps = Object.assign(
{},
diff --git a/tests/store.test.ts b/tests/store.test.ts
index adbcccb9..0da265a1 100644
--- a/tests/store.test.ts
+++ b/tests/store.test.ts
@@ -193,4 +193,32 @@ describe("connecting a component to store", () => {
"
jupilerhoegaarden
"
);
});
+
+ test("connected component is updated when props are updated", async () => {
+ class Beer extends Component {
+ inlineTemplate = ``;
+ }
+ const ConnectedBeer = connect((state, props) => {
+ return state.beers[props.id];
+ })(Beer);
+
+ class App extends Component {
+ inlineTemplate = `
+
+
`;
+ widgets = { ConnectedBeer };
+ state = { beerId: 1 };
+ }
+
+ const state = { beers: { 1: { name: "jupiler" }, 2: { name: "kwak" } } };
+ const store = new Store({ state });
+ (env).store = store;
+ const app = new App(env);
+
+ await app.mount(fixture);
+ expect(fixture.innerHTML).toBe("jupiler
");
+
+ await app.updateState({ beerId: 2 });
+ expect(fixture.innerHTML).toBe("kwak
");
+ });
});