mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
+13
-1
@@ -208,7 +208,11 @@ Note that getters are not cached.
|
|||||||
### Connecting a Component
|
### Connecting a Component
|
||||||
|
|
||||||
At some point, we need a way to interact with the store from a component. This
|
At some point, we need a way to interact with the store from a component. This
|
||||||
can be done with the help of the three store hooks:
|
means that the component needs a reference to the store. By default, it looks
|
||||||
|
for it in the `env.store` key. However, this can be configured with the `useStore`
|
||||||
|
hook.
|
||||||
|
|
||||||
|
Every component-store interactions are done with the help of the three store hooks:
|
||||||
|
|
||||||
- [`useStore`](#usestore) to subscribe a component to some part of the store state,
|
- [`useStore`](#usestore) to subscribe a component to some part of the store state,
|
||||||
- [`useDispatch`](#usedispatch) to get a reference to a dispatch function,
|
- [`useDispatch`](#usedispatch) to get a reference to a dispatch function,
|
||||||
@@ -229,6 +233,14 @@ const state = {
|
|||||||
const store = new owl.Store({ state, actions });
|
const store = new owl.Store({ state, actions });
|
||||||
```
|
```
|
||||||
|
|
||||||
|
To make it accessible to the complete application, we will put it in the
|
||||||
|
environment:
|
||||||
|
|
||||||
|
```js
|
||||||
|
// in this example, the root component is App
|
||||||
|
App.env.store = store;
|
||||||
|
```
|
||||||
|
|
||||||
A counter component can then select this value and dispatch an action like this:
|
A counter component can then select this value and dispatch an action like this:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
|||||||
Reference in New Issue
Block a user