docs(website): improve guide by adding action trigger example

Author: christianalfoni

packages/overmind-website/examples/api/app_initialize.ts

@@ -37,7 +37,7 @@ export const overmind = new Overmind({
   actions
 })
 
-export const connect = createConnect(app)
+export const connect = createConnect(overmind)
 `,
         },
       ]

packages/overmind-website/examples/guide/getstarted/triggeraction.ts

@@ -0,0 +1,126 @@
+const javascript = {
+  react: [
+    {
+      fileName: 'Posts.js',
+      target: 'jsx',
+      code: `
+import React from 'react'
+import { connect } from '../overmind'
+
+class Posts extends React.Component {
+  componentDidMount() {
+    this.props.overmind.actions.loadPosts()
+  }
+  render() {
+    const { overmind } = this.props
+
+    if (overmind.state.isLoadingPosts) {
+      return <h4>Loading posts...</h4>
+    }
+  
+    return (
+      <ul>
+        {overmind.state.posts.map(post => <li key={post.id}>{post.title}</li>)}
+      </ul>
+    )
+  }
+}
+
+export default connect(Posts)
+    `,
+    },
+  ],
+  vue: [
+    {
+      fileName: 'Posts.vue (template)',
+      target: 'markup',
+      code: `
+<h4 v-if="overmind.state.isLoadingPosts">
+  Loading posts...
+</h4>
+<ul v-else>
+  <li v-for="post in overmind.state.posts">
+    {{post.title}}
+  </li>
+</ul>
+    `,
+    },
+    {
+      fileName: 'Posts.vue (script)',
+      code: `
+import { connect } from '../overmind'
+
+export default connect({
+  mounted() {
+    this.overmind.actions.loadPosts()
+  }
+})
+  `,
+    },
+  ],
+}
+
+const typescript = {
+  react: [
+    {
+      fileName: 'components/Posts.tsx',
+      code: `
+import * as React from 'react'
+import { Connect, connect } from '../overmind'
+
+class Posts extends React.Component<Connect> {
+  componentDidMount() {
+    this.props.overmind.actions.loadPosts()
+  }
+  render() {
+    const { overmind } = this.props
+
+    if (overmind.state.isLoadingPosts) {
+      return <h4>Loading posts...</h4>
+    }
+  
+    return (
+      <ul>
+        {overmind.state.posts.map(post => <li key={post.id}>{post.title}</li>)}
+      </ul>
+    )
+  }
+}
+
+export default connect(Posts)
+    `,
+    },
+  ],
+  vue: javascript.vue,
+  angular: [
+    {
+      fileName: 'posts.component.ts',
+      code: `
+import { Component } from '@angular/core';
+import { connect } from '../overmind'
+
+@Component({
+  selector: 'posts-list',
+  template: \`
+  <h4 *ngIf="overmind.state.isLoadingPosts">
+    Loading posts...
+  </h4>
+  <ul *ngIf="!overmind.state.isLoadingPosts">
+    <li *ngFor="let post of overmind.state.posts">
+      {{post.title}}
+    </li>
+  </ul>
+  \`
+})
+@connect()
+export class PostsList {
+  ngOnInit() {
+    this.overmind.actions.loadPosts()
+  }
+}
+    `,
+    },
+  ],
+}
+
+export default (ts, view) => (ts ? typescript[view] : javascript[view])

packages/overmind-website/guides/beginner/01_getstarted.md

@@ -48,11 +48,17 @@ Let us see how we define this effect called **jsonPlaceholder**.
 
 ## Effects
 
+We can expose any kind of side effects to our Overmind instance. Think of it as injecting libraries and tools. For example, it could be the [axios](https://www.npmjs.com/package/axios) library itself, some class instance we created or just a plain object as we see in the example below. Doing this injection keeps our actions pure and Overmind knows when these injected libraries are accessed.
+
 ```marksy
 h(Example, { name: "guide/getstarted/effects" })
 ```
 
-We can expose any kind of side effects to our Overmind instance. Think of it as injecting libraries and tools. For example, it could be the [axios](https://www.npmjs.com/package/axios) library itself, some class instance we created or just a plain object as we see in this example. Doing this injection keeps our actions pure and Overmind knows when these injected libraries are accessed.
+Finally we need to trigger our action and we will do that when the component mounts.
+
+```marksy
+h(Example, { name: "guide/getstarted/triggeraction" })
+```
 
 ## Devtools