[REF] store: replace ConnectedComponent by useStore hook

Closes #304

doc/hooks.md

@@ -15,6 +15,9 @@
   - [`useContext`](#usecontext)
   - [`useRef`](#useref)
   - [`useSubEnv`](#usesubenv)
+  - [`useStore`](#usestore)
+  - [`useDispatch`](#usedispatch)
+  - [`useGetters`](#usegetters)
   - [Making customized hooks](#making-customized-hooks)
 
 ## Overview
@@ -283,6 +286,21 @@ will be added to the parent environment. Note that it will extend, not replace
 the parent environment. And of course, the parent environment will not be
 affected.
 
+### `useStore`
+
+The `useStore` hook is the entry point for a component to connect to the store.
+See the [store documentation](store.md) for more information.
+
+### `useDispatch`
+
+The `useDispatch` hook is the way for components to get a reference to the store
+`dispatch` function. See the [store documentation](store.md) for more information.
+
+### `useGetters`
+
+The `useGetters` hook is the way for components to get a reference to the store
+getters. See the [store documentation](store.md) for more information.
+
 ### Making customized hooks
 
 Hooks are a wonderful way to organize the code of a complex component by feature
@@ -346,4 +364,4 @@ not the solution to every problem.
   test our components, we can just add a mock router in the environment.
 
 Note: the code above makes use of the `Component.current` property. This is the
-way hooks are able to get a reference to the component currently being created.
+way hooks are able to get a reference to the component currently being created.

doc/readme.md

@@ -10,6 +10,7 @@ owl
     Component
     Context
     QWeb
+    Store
     useState
     core
         EventBus
@@ -23,13 +24,13 @@ owl
         useState
         useRef
         useSubEnv
+        useStore
+        useDispatch
+        useGetters
     router
         Link
         RouteComponent
         Router
-    store
-        Store
-        ConnectedComponent
     tags
         xml
     utils
@@ -40,6 +41,7 @@ owl
         whenReady
 ```
 
+
 Note that for convenience, the `useState` hook is also exported at the root of the `owl` object.
 
 ## Reference

doc/store.md

@@ -21,8 +21,9 @@ in various parts of the user interface, and then, it is not obvious which
 component should own which part of the state.
 
 Owl's solution to this issue is a centralized store. It is a class that owns
-some state, and let the developer update it in a structured way, with `actions`.
-Owl components can then connect to the store, and will be updated if necessary.
+some (or all) state, and let the developer update it in a structured way, with
+`actions`. Owl components can then connect to the store, and will be updated if
+necessary.
 
 Note: Owl store is inspired by React Redux and VueX.
 
@@ -47,7 +48,7 @@ const state = {
 };
 
 const store = new owl.Store({ state, actions });
-store.on("update", () => console.log(store.state));
+store.on("update", null, () => console.log(store.state));
 
 // updating the state
 store.dispatch("addTodo", "fix all bugs");