diff --git a/doc/store.md b/doc/store.md
index 1cb45f44..32d19530 100644
--- a/doc/store.md
+++ b/doc/store.md
@@ -227,6 +227,25 @@ The `ConnectedComponent` class can be configured with the following fields:
- `deep` (boolean): [only useful if no hashFunction is given] if `false`, only watch
for top level state changes (`true` by default)
+Note that the class `ConnectedComponent` has a `dispatch` method. This means
+that the previous example could be simplified like this:
+
+```javascript
+class Counter extends owl.ConnectedComponent {
+ static mapStoreToProps(state) {
+ return {
+ value: state.counter
+ };
+ }
+}
+```
+
+```xml
+
+```
+
### Semantics
The `Store` and the `ConnectedComponent` try to be smart and to optimize as much
diff --git a/src/store/connected_component.ts b/src/store/connected_component.ts
index 72c187ca..7064104e 100644
--- a/src/store/connected_component.ts
+++ b/src/store/connected_component.ts
@@ -39,10 +39,18 @@ export class ConnectedComponent extends Component
return {};
}
+ dispatch() {
+ const [name, ...payload] = arguments;
+ (this.__owl__ as any).store.dispatch(name, ...payload);
+ }
+
/**
* Need to do this here so 'deep' can be overrided by subcomponent easily
*/
- async __prepareAndRender(scope?: Object, vars?: any): ReturnType["__prepareAndRender"]> {
+ async __prepareAndRender(
+ scope?: Object,
+ vars?: any
+ ): ReturnType["__prepareAndRender"]> {
const store = this.getStore(this.env);
const ownProps = this.props || {};
this.storeProps = (this.constructor).mapStoreToProps(store.state, ownProps, store.getters);
@@ -87,22 +95,22 @@ export class ConnectedComponent extends Component
this.storeProps = storeProps;
let didChange = options.didChange;
if (storeHash !== (this.__owl__ as any).storeHash) {
- (this.__owl__ as any).storeHash = storeHash;
+ (this.__owl__ as any).storeHash = storeHash;
didChange = true;
}
(this.__owl__ as any).rev = store.observer.rev;
- return didChange
+ return didChange;
}
async __checkUpdate() {
const observer = (this.__owl__ as any).store.observer;
if (observer.rev === (this.__owl__ as any).rev) {
- // update was already done by updateProps, from parent
- return;
+ // update was already done by updateProps, from parent
+ return;
}
const didChange = this.__updateStoreProps(this.props);
if (didChange) {
- this.render();
+ this.render();
}
}
}
diff --git a/tests/store/connected_component.test.ts b/tests/store/connected_component.test.ts
index 82e84ba8..7039f501 100644
--- a/tests/store/connected_component.test.ts
+++ b/tests/store/connected_component.test.ts
@@ -140,6 +140,43 @@ describe("connecting a component to store", () => {
expect(fixture.innerHTML).toMatchSnapshot();
});
+ test("can dispatch actions from a connected component", async () => {
+ env.qweb.addTemplates(`
+
+