Use store hook docs and fix act warning (#6)

README.md

@@ -11,10 +11,10 @@ $ yarn add @umbrellio/observable
 
 ## Usage
 
-The library contains of 3 parts - `observable`, `observer` and `multipleObserver`.
+The library contains of 4 parts - `observable`, `observer`, `multipleObserver` and `useStore`.
 
 ```js
-import { observable, observer, multipleObserver } from "@umbrellio/observable"
+import { observable, observer, multipleObserver, useStore } from "@umbrellio/observable"
 ```
 
 ### Structures
@@ -44,6 +44,10 @@ type MultipleObserverOptionItem = {
   key: String, // property name
   map: (State => Object)?, // function for mapping state
 }
+
+type UseStoreOptions = {
+  map: (State => Object)?, // function for mapping state
+}
 ```
 
 ### `observable`
@@ -122,6 +126,24 @@ class List extends React.Component {
 }
 ```
 
+### `useStore`
+
+React hook that keeps track of the observable store.
+
+```js
+useStore(store: ObservableStore, options: UseStoreOptions): State
+```
+
+```js
+import { useStore } from "@umbrellio/observable"
+
+const List = () => {
+  const categories = useStore(listStore, { map: state => state.list })
+
+  return <ul>{categories.map(item => <li>{item}</li>)}</ul>
+}
+```
+
 ## Contributing
 
 Bug reports and pull requests are welcome on GitHub at https://github.com/umbrellio/observable.

tests/useStore.test.js

@@ -1,6 +1,7 @@
 import React from "react"
 import Adapter from "enzyme-adapter-react-16"
 import { configure, mount } from "enzyme"
+import { act } from "react-dom/test-utils"
 
 import { observable, useStore } from "../src"
 
@@ -23,13 +24,15 @@ describe("useStore hook", () => {
   })
 
   beforeEach(() => {
-    store.reset()
+    act(() => store.reset())
   })
 
   it("keeps track of given store", () => {
     const component = mount(<TestComponent />)
     expect(component.html()).toEqual("<pre>{\"value\":3}</pre>")
 
+    act(() => store.set({ key: 4 }))
+
     setTimeout(() => {
       expect(component.html()).toEqual("<pre>{\"value\":4}</pre>")
       component.unmount()
@@ -40,7 +43,7 @@ describe("useStore hook", () => {
     const component = mount(<TestComponentWithMapping />)
     expect(component.html()).toEqual("<pre>{\"square\":9}</pre>")
 
-    store.set({ key: 4 })
+    act(() => store.set({ key: 4 }))
 
     setTimeout(() => {
       expect(component.html()).toEqual("<pre>{\"square\":16}</pre>")