GitBook: [master] 3 pages modified

Author: christianalfoni

api/action.md

@@ -1,28 +1,99 @@
 # action
 
+```javascript
+import App from 'overmind/$VIEW'
+
+const app = new App({
+  actions: action => ({
+    doThis: action()
+      .do((context, value) => {})
+  })
+})
+```
+
+The actions is defined with a callback receiving the applications action factory. The function is expected to return an object with actions.
+
 ### map
 
-yeah
+Returns a new value to the chain.
+
+```javascript
+export default action => ({
+  getEventValue: action()
+    .map((_, event) => event.target.value)
+})
+```
+
+```javascript
+export default action => ({
+  getPosts: action()
+    .map(({ api }) => api.getPosts())
+})
+```
 
 ### mutation
 
-yeah
+Change the state of the application. State changes are only allowed in this operator, which is why it only receives the state as the first argument, not the other providers.
+
+```javascript
+export default action => ({
+  changeInputValue: action()
+    .mutation((state, value) => state.inputValue = value)
+})
+```
 
 ### do
 
-yeah
+Perform some side effect without returning a new value to the chain. Any returned value will be ignored.
+
+```javascript
+export default action => ({
+  onClick: action()
+    .do(({ track }) => track.click('someClick'))
+})
+```
 
 ### debounce
 
-yeah
+If the action has not been called again within the number of milliseconds, continue execution.
+
+```javascript
+export default action => ({
+  search: action()
+    .mutation((state, value) => state.searchInputValue = value)
+    .debounce(200)
+    .map(({ api}, value) => api.search(value)
+})
+```
 
 ### when
 
-yeah
+Fork execution into **true** and **false** actions based on an expression.
+
+```javascript
+export default action => ({
+  openProfile: action()
+    .when(({ state }) => state.user.isLoggedIn, {
+      true: action(),
+      false: action()
+    })
+})
+```
 
 ### fork
 
-yeah
+Fork execution into any number of actions. Note that fork does not return a new value to the chain.
+
+```javascript
+export default action => ({
+  openAdmin: action()
+    .fork(({ state }) => state.user.role, {
+      admin: action(),
+      superuser: action(),
+      user: action()
+    })
+})
+```
 
 
 

api/app.md

@@ -1,2 +1,68 @@
 # app
 
+```javascript
+import App from 'overmind/$view'
+
+const app = new App({
+  state,
+  actions,
+  providers,
+  reactions
+}, {
+  // Connect to devtools with host and port. The host
+  // might need to be your local IP, depending on environment
+  devtools: 'localhost:1234'
+})
+```
+
+Overmind currently supports **react** as view layer.
+
+### Extend App
+
+You can extend the Overmind application class to create a custom connector to other view layers.
+
+```javascript
+import App from 'overmind'
+
+class MyApp extends App {
+  connect(component) {
+    // Starts tracking state access
+    const trackId = this.trackState()
+    
+    // Stops tracking state access
+    const paths = this.clearTrackstate(trackId)
+    
+    // Creates a mutation subscription
+    const listener = this.addMutationListener(paths, () => {
+      // This callback is called whenever a mutation
+      // affects the tracked paths. Typically used
+      // to re-render the component
+    })
+    
+    // You will typically track the paths again when re-rendering
+    // the component. Update the listener by passing the new paths
+    listener.update(paths)
+    
+    // Typically when component unmounts you want to dispose
+    // the listener
+    listener.dispose()
+    
+    // A factory for creating reactions in components
+    const reaction = this.createReactionFactory(component.name)
+    
+    // Pass this function to the component, which allows reactions
+    // to be added with the following signature:
+    // this.props.reaction('name', state => state.foo, () => {
+    //   do something on state change
+    // })
+    reaction.add
+    
+    // Disposes the reactions registered. Typically do this when
+    // component unmounts
+    reaction.dispose
+  }
+}
+```
+
+Take a look at the existing view implementations for inspiration and reference.
+

untitled.md

@@ -1,6 +1,6 @@
 # Side effects
 
-Overmind helps you expose side effects to your application logic. It does this with a concept called **Providers**. A provider is nothing more than an object with methods or a class instance. For example exposing an http library like [axios](https://github.com/axios/axios)  could be done like this:
+Overmind helps you expose side effects to your application logic. It does this with a concept called **Effects**. An effect is nothing more than an object with methods or a class instance. For example exposing an http library like [axios](https://github.com/axios/axios)  could be done like this:
 
 {% code-tabs %}
 {% code-tabs-item title="app/providers.js" %}
@@ -29,20 +29,20 @@ export const api = new Api('/api/v1')
 
 Using a class is useful when you want to pass in options based on the environment, or maybe the library exposes a class in itself.
 
-The providers are added to the configuration of the app:
+The effects are added to the configuration of the app:
 
 {% code-tabs %}
 {% code-tabs-item title="app/index.js" %}
 ```javascript
 import App from 'overmind/$VIEW'
 import state from './state'
 import actions from './actions'
-import providers from './providers'
+import effects from './effects'
 
 const app = new App({
   state,
   actions,
-  providers
+  effects
 })
 
 export const connect = app.connect