GitBook: [master] 13 pages and 2 assets modified

christianalfoni · gitbook-bot · commit fbc1678a33f2 · 2021-01-23T12:14:34.000Z
diff --git a/.gitbook/assets/image (1) (1).png b/.gitbook/assets/image (1) (1).png
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@ description: frictionless state management
 
 > Web application development is about **defining**, **changing** and **consuming state** to produce a user experience. Overmind aims for a developer experience where that is all you focus on, reducing the orchestration of state management to a minimum. Making you a **happier** and more **productive** developer!
 
-{% embed url="https://overmindjs.changefeed.app/general/v26" %}
+{% embed url="https://overmindjs.changefeed.app/general/v26" caption="" %}
 
 ## APPLICATION INSIGHT
 
diff --git a/addons/graphql.md b/addons/graphql.md
@@ -31,7 +31,6 @@ export const config = {
 
 {% tab title="overmind/state.js" %}
 ```typescript
-
 export const state = {
   posts: []
 }
@@ -183,7 +182,7 @@ export const getPosts = async ({ state, effects, actions }) => {
   const { posts } = await effects.gql.queries.posts()
 
   state.posts = posts
-  
+
   effects.gql.subscriptions.onPostAdded(actions.onPostAdded)
 }
 
diff --git a/api-1/statemachine.md b/api-1/statemachine.md
@@ -18,7 +18,7 @@ export const state = statemachine({
 })
 ```
 
-Instead of only defining state, you first define a set of transitions. The key represents a transition state, here **UNAUTHENTICATED**, **AUTHENTICATING** and **AUTHENTICATED**. Then we define an array which shows the next transition state can occur in the given transition state. When **UNAUTHENTICATED** we can move into the **AUTHENTICATING** state for example. When in **AUTHENTICATING** state we can move either back to **UNAUTHENTICATED** due to an error or we might move to **AUTHENTICATED**. The point is... when you are **UNAUTHENTICATED**, you can not run logic related to being **AUTHENTICATED**. And when **AUTHENTICATING** you can not run that logic again until you are back in **UNAUTHENTICATED**. 
+Instead of only defining state, you first define a set of transitions. The key represents a transition state, here **UNAUTHENTICATED**, **AUTHENTICATING** and **AUTHENTICATED**. Then we define an array which shows the next transition state can occur in the given transition state. When **UNAUTHENTICATED** we can move into the **AUTHENTICATING** state for example. When in **AUTHENTICATING** state we can move either back to **UNAUTHENTICATED** due to an error or we might move to **AUTHENTICATED**. The point is... when you are **UNAUTHENTICATED**, you can not run logic related to being **AUTHENTICATED**. And when **AUTHENTICATING** you can not run that logic again until you are back in **UNAUTHENTICATED**.
 
 As actual state values we define the initial transition state of **UNAUTHENTICATED**.
 
diff --git a/core/defining-state.md b/core/defining-state.md
@@ -197,7 +197,7 @@ The **SERIALIZE** symbol will not be part of the actual serialization done with
 
 #### Rehydrating classes
 
-The [**rehydrate**](../api-1/rehydrate.md) _\*\*_utility of Overmind allows you to rehydrate state either by a list of mutations or a state object, like the following:
+The [**rehydrate**](../api-1/rehydrate.md) \_\*\*\_utility of Overmind allows you to rehydrate state either by a list of mutations or a state object, like the following:
 
 {% tabs %}
 {% tab title="overmind/actions.js" %}
@@ -321,7 +321,7 @@ const state = {
 
 You can not be authenticating and be authenticated at the same time. This kind of logic very often causes bugs in applications. That is why Overmind allows you to define statemachines. It sounds complicated, but is actually very simple.
 
-To properly understand state machines, please read the guide [**Using state machines**](../guides-1/using-state-machines.md). 
+To properly understand state machines, please read the guide [**Using state machines**](../guides-1/using-state-machines.md).
 
 ## References
 
diff --git a/core/devtools.md b/core/devtools.md
@@ -51,7 +51,7 @@ If you are using the **Insiders** version of VSCode the extension will not work.
 When you create your application it will automatically connect through **localhost:3031**, meaning that everything should just work out of the box. If you need to change the port, connect the application over a network \(mobile development\) or similar, you can configure how the application connects:
 
 ```javascript
-import { createOvermind } from 'overmind'
+import { createOvermind } from 'overmind'
 import { config } from './overmind'
 
 const overmind = createOvermind(config, {
@@ -63,7 +63,7 @@ const overmind = createOvermind(config, {
 
 ChromeOS does not expose localhost as normal. That means you need to connect with **penguin.termina.linux.test:3031**, or you can use the following plugin to forward **localhost:**
 
-{% embed url="https://chrome.google.com/webstore/detail/connection-forwarder/ahaijnonphgkgnkbklchdhclailflinn/related?hl=en-US" %}
+{% embed url="https://chrome.google.com/webstore/detail/connection-forwarder/ahaijnonphgkgnkbklchdhclailflinn/related?hl=en-US" caption="" %}
 
 ## Hot Module Replacement
 
@@ -104,8 +104,6 @@ import { Provider } from 'overmind-react'
 import { App } from './components/App'
 
 render(<Provider value={overmind}><App /></Provider>, document.querySelector('#app'))
-
-
 ```
 {% endtab %}
 
diff --git a/core/server-side-rendering.md b/core/server-side-rendering.md
@@ -204,7 +204,6 @@ export default class MyApp extends App {
     );
   }
 }
-
 ```
 {% endtab %}
 {% endtabs %}
@@ -226,7 +225,6 @@ export const config = {
 };
 
 export const useOvermind = createHook();
-
 ```
 
 And you are all set to get going with `overmind` and `next.js`. You can also take a look at [this example in the next.js examples directory](https://github.com/vercel/next.js/tree/canary/examples/with-overmind) if you need some help.
@@ -244,13 +242,12 @@ import { Provider } from "overmind-react"
 import { config } from "./src/overmind"
 
 const overmind = createOvermind(config);
-  
+
 export const wrapPageElement = ({ element }) => (
   <Provider value={createOvermind(config)}>
     {element}
   </Provider>
 )
-
 ```
 
 After this is done we can do the same thing for the server render and add that code in the `gatsby-ssr.js` file:
@@ -270,7 +267,6 @@ export const wrapPageElement = ({ element }) => (
     {element}
   </Provider>
 )
-
 ```
 
 As you can see the only difference we have here is that we createOvermindSSR in the `gatsby-ssr.js`
diff --git a/core/typescript.md b/core/typescript.md
@@ -112,7 +112,7 @@ export const state: State = {
 {% endtabs %}
 
 {% hint style="info" %}
-It is important that you use a **type** and not an **interface.** This has to do with the way Overmind resolves the state typing. ****
+It is important that you use a **type** and not an **interface.** This has to do with the way Overmind resolves the state typing. _\*\*_
 {% endhint %}
 
 When writing Typescript you should **not** use optional values for your state \(**?**\), or use **undefined** in a union type. In a serializable state store world **null** is the value indicating _“there is no value”._
@@ -142,7 +142,7 @@ export const state: State = {
 {% tabs %}
 {% tab title="overmind/state.ts" %}
 ```typescript
-import { derived } from 'overmind'
+import { derived } from 'overmind'
 
 type State = {
   foo: string
@@ -162,7 +162,7 @@ Note that the type argument you pass is the object the derived is attached to, s
 {% tabs %}
 {% tab title="overmind/state.ts" %}
 ```typescript
-import { derived } from 'overmind'
+import { derived } from 'overmind'
 
 type State = {
   foo: string
@@ -245,7 +245,7 @@ There are no Overmind specific types related to effects, you just type them in g
 export const api = {
   getUser: async (): Promise<User> => {
     const response = await fetch('/user')
-    
+
     return response.json()
   }
 }
diff --git a/faq.md b/faq.md
@@ -14,5 +14,3 @@ Restart VS Code
 
 Operators are identified with a Symbol. If you happen to use Overmind across packages you might be running two versions of Overmind. The same goes for core package and view package installed out of version sync. Make sure you are only running on package of Overmind by looking into your **node\_modules** folder.
 
-
-
diff --git a/guides-1/using-state-machines.md b/guides-1/using-state-machines.md
@@ -119,7 +119,7 @@ By explicitly instantiating the machine you are allowed to start it in different
 
 ## Sending events
 
-Instead of explicitly changing the state, you send an **event**.  The events is handled by the state machine and it will ensure that it is valid before moving on. That means when you change from **AUTHENTICATING** to **AUTHENTICATED** you would express it something like:
+Instead of explicitly changing the state, you send an **event**. The events is handled by the state machine and it will ensure that it is valid before moving on. That means when you change from **AUTHENTICATING** to **AUTHENTICATED** you would express it something like:
 
 ```javascript
 export const authChanged = ({ state }, user) => {
@@ -131,7 +131,7 @@ export const authChanged = ({ state }, user) => {
 }
 ```
 
-When sending the **SIGNED\_IN** event we also provide the **user**. The current transition state of the machine is what decides if the user is set or not. 
+When sending the **SIGNED\_IN** event we also provide the **user**. The current transition state of the machine is what decides if the user is set or not.
 
 ## Guarding effects
 
@@ -163,7 +163,7 @@ type States =
  | {
    current: 'LIST'
  }
- 
+
  type BaseState {
    list: Todo[]
  }
@@ -177,7 +177,7 @@ type Events =
     type: 'TODO_ADDED',
     data: Todo
   }
-  
+
 export type TodosMachine = StateMachine<States, Events BaseState>
 
 export const todos = statemachine<States, Events, BaseState>({
@@ -194,7 +194,7 @@ export const todos = statemachine<States, Events, BaseState>({
 })
 ```
 
-In this simple example we introduced a todos machine that starts in a **LOADING** state and will at some point transition into a **LIST** state when the initial todos has been loaded. The machine introduces the concept of **base state**. That means state that is available no matter what transition state the machine is in. The purpose of **base state** is that it simplifies typing and the machine will also automatically remove state related to the current transition state, when transitioning to a new state. In the example above the **user** and the **signedOutReason** is deleted when moving out of  **AUTHENTICATED** state.
+In this simple example we introduced a todos machine that starts in a **LOADING** state and will at some point transition into a **LIST** state when the initial todos has been loaded. The machine introduces the concept of **base state**. That means state that is available no matter what transition state the machine is in. The purpose of **base state** is that it simplifies typing and the machine will also automatically remove state related to the current transition state, when transitioning to a new state. In the example above the **user** and the **signedOutReason** is deleted when moving out of **AUTHENTICATED** state.
 
 ## Nesting state machines
 
@@ -266,15 +266,15 @@ All state machines has a **current** property. This can be used to evaluate what
 ```javascript
 export const App = () => {
   const { state } = useOvermind()
-  
+
   if (state.current === 'AUTHENTICATING') {
     return <div>Loading...</div>
   }
-  
+
   if (state.current === 'AUTHENTICATED') {
     return <div>You are not authenticated</div>
   }
-  
+
   return <div>Hello there!</div>
 }
 ```
@@ -284,9 +284,9 @@ When dealing with nested machines you will have to do nested checks. This might
 ```typescript
 export const Todos = () => {
   const { state } = useOvermind()
-  
+
   if (!state.current === 'AUTHENTICATED') return null
-  
+
   return (
     <div>
       {state.todos.current === 'LOADING' ? 'Loading...' : null}
diff --git a/introduction.md b/introduction.md
@@ -8,7 +8,7 @@ If you rather want to go right ahead and set up a local project, please have a l
 
 Before we move on, have a quick look at this sandbox. It is a simple counter application and it gives you some foundation before talking more about Overmind and building applications.
 
-{% embed url="https://codesandbox.io/s/overmind-counter-c4tuh?fontsize=14&hidenavigation=1&theme=dark&view=editor&runonclick=1" %}
+{% embed url="https://codesandbox.io/s/overmind-counter-c4tuh?fontsize=14&hidenavigation=1&theme=dark&view=editor&runonclick=1" caption="" %}
 
 ## Application state VS Component state
 
@@ -93,7 +93,7 @@ And as we will see later you will also be using **effects** from the context.
 
 Now we will move to a more complex example. Please have a look:
 
-{% embed url="https://codesandbox.io/s/overmind-todomvc-simple-097zs?fontsize=14&hidenavigation=1&theme=dark&view=editor&runonclick=1" %}
+{% embed url="https://codesandbox.io/s/overmind-todomvc-simple-097zs?fontsize=14&hidenavigation=1&theme=dark&view=editor&runonclick=1" caption="" %}
 
 We have now separated out the Overmind related logic into its own file, **app.js**. This file creates the Overmind instance and also exports how the components will interact with the state and the actions, the hook called **useApp**. Vue and Angular has other mechanisms conventional to those frameworks where application state and actions can be accessed.
 
@@ -139,7 +139,7 @@ state.todos[myReference]
 delete state.todos[myReference]
 ```
 
-Using references also ensures that only one instance of any todo will live in your state tree. The todo itself lives on the **todos** state, while everything else in the state tree references a todo by using its id. For example our **editingTodoId** state uses the id of a todo to reference which todo is currently being edited. 
+Using references also ensures that only one instance of any todo will live in your state tree. The todo itself lives on the **todos** state, while everything else in the state tree references a todo by using its id. For example our **editingTodoId** state uses the id of a todo to reference which todo is currently being edited.
 
 ## Deriving state
 
@@ -183,7 +183,7 @@ By using the **derived** function exported from Overmind you can insert a functi
 
 Now let us move into an even more complex application. Here we have added **effects**. Specifically effects to handle routing, storing todos to local storage and producing unique ids for the todos. We have added an **onInitialize** hook which is a special function Overmind runs when the application starts.
 
-{% embed url="https://codesandbox.io/s/overmind-todomvc-2im6p?fontsize=14&hidenavigation=1&theme=dark&view=editor&runonclick=1" %}
+{% embed url="https://codesandbox.io/s/overmind-todomvc-2im6p?fontsize=14&hidenavigation=1&theme=dark&view=editor&runonclick=1" caption="" %}
 
 You can think of effects as a contract between your application and the outside world. You write an effect API of **what** your application needs and some 3rd party tool or native JavaScript API will implement **how** to provide it. Let us look at the router:
 
@@ -223,7 +223,7 @@ This argument passed is transformed into something Page can understand. What thi
 
 Defining all the state, actions and effects on one object would not work very well for a large application. A convention in Overmind is to split these concepts into different files behind folders representing a domain of the application. In this next sandbox you can see how we split up state, actions and effects into different files. They are all exposed through a main file representing that domain, in this case “the root domain”:
 
-{% embed url="https://codesandbox.io/s/overmind-todomvc-split-xdh41?fontsize=14&hidenavigation=1&theme=dark&view=editor&runonclick=1" %}
+{% embed url="https://codesandbox.io/s/overmind-todomvc-split-xdh41?fontsize=14&hidenavigation=1&theme=dark&view=editor&runonclick=1" caption="" %}
 
 Also notice that we have split up the instantiation of Overmind from the definition of the application. What this allows us to do is reuse the same application configuration for testing purposes and/or server side rendering. We separate the definition from the instantiation.
 
@@ -239,7 +239,7 @@ Have a look at this new project where we have typed the application:
 You have to **OPEN SANDBOX** to get the full Typescript experience.
 {% endhint %}
 
-{% embed url="https://codesandbox.io/s/overmind-todomvc-typescript-39h7y?fontsize=14&hidenavigation=1&theme=dark&view=editor&runonclick=1" %}
+{% embed url="https://codesandbox.io/s/overmind-todomvc-typescript-39h7y?fontsize=14&hidenavigation=1&theme=dark&view=editor&runonclick=1" caption="" %}
 
 As you can see we only have to add an **Action** type to our functions and optionally give it an input type. This is enough for the action to give you all information about the application. Try changing some code and even add some code to see how Typescript helps you to explore the application and ensure that you implement new functionality correctly.
 
diff --git a/views/angular.md b/views/angular.md
@@ -52,7 +52,6 @@ import { AppComponent } from './app.component';
 ]
 })
 export class AppModule { }
-
 ```
 {% endtab %}
 
@@ -99,7 +98,6 @@ platformBrowserDynamic()
     ngZone: "noop"
   })
   .catch(err => console.log(err));
-
 ```
 {% endtab %}
 {% endtabs %}
diff --git a/views/react.md b/views/react.md
@@ -121,7 +121,7 @@ const App: React.FunctionComponent = () => {
   // Or be specific
   const { isLoggedIn } = useState().auth
   const { login, logout } = useActions().auth
-  
+
   return <div />
 }
 
diff --git a/views/vue.md b/views/vue.md
@@ -13,7 +13,6 @@ There are three approaches to connecting Overmind to Vue.
 {% tabs %}
 {% tab title="overmind/index.js" %}
 ```typescript
-
 import { createHooks } from 'overmind-vue'
 
 export const config = {
@@ -54,12 +53,12 @@ createApp(withOvermind(overmind, App)).mount('#app')
 </template>
 <script>
   import { hooks } from '../overmind'
-  
+
   export default {
     setup() {
       const state = hooks.state()
       const actions = hooks.actions()
-      
+
       return { state, actions }
     }
   }
@@ -80,12 +79,12 @@ The hooks also allows you to point to specific namespaces:
 </template>
 <script>
   import { hooks } from '../overmind'
-  
+
   export default {
     setup() {
       const state = hooks.state(state => state.admin)
       const actions = hooks.actions(actions => actions.admin)
-      
+
       return { state, actions }
     }
   }
@@ -105,12 +104,12 @@ You also have **effects** and **reaction** available on your hooks:
 </template>
 <script>
   import { hooks } from '../overmind'
-  
+
   export default {
     setup() {
       const effects = hooks.effects()
       const reaction = hooks.reaction()
-      
+
       return { state, actions }
     }
   }
@@ -126,12 +125,12 @@ If you prefer using JSX, that is also possible:
 ```javascript
 <script>
   import { hooks } from '../overmind'
-  
+
   export default {
     setup() {
       const state = hooks.state()
       const actions = hooks.actions()
-      
+
       return () => (
         <div onClick={actions.onClick}>{state.value.foo}</div>
       )

Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,6 @@ export const config = {`
`31`	`31`
`32`	`32`	`{% tab title="overmind/state.js" %}`
`33`	`33`	```typescript
`34`		`-`
`35`	`34`	`export const state = {`
`36`	`35`	`posts: []`
`37`	`36`	`}`
`@@ -183,7 +182,7 @@ export const getPosts = async ({ state, effects, actions }) => {`
`183`	`182`	`const { posts } = await effects.gql.queries.posts()`
`184`	`183`
`185`	`184`	`state.posts = posts`
`186`		`-`
	`185`	`+`
`187`	`186`	`effects.gql.subscriptions.onPostAdded(actions.onPostAdded)`
`188`	`187`	`}`
`189`	`188`
Original file line number	Diff line number	Diff line change
`@@ -14,5 +14,3 @@ Restart VS Code`
`14`	`14`
`15`	`15`	`Operators are identified with a Symbol. If you happen to use Overmind across packages you might be running two versions of Overmind. The same goes for core package and view package installed out of version sync. Make sure you are only running on package of Overmind by looking into your node\_modules folder.`
`16`	`16`
`17`		`-`
`18`		`-`