GitBook: [v28] 45 pages modified

Author: christianalfoni

README.md

@@ -50,7 +50,7 @@ export const fetchItems = async () {
 
 {% tab title="actions.js" %}
 ```typescript
-export const loadApp = ({ state, effects }) => {
+export const loadApp = async ({ state, effects }) => {
   state.items = await effects.api.fetchItems()
 }
 ```
@@ -80,11 +80,11 @@ export const search = pipe(
   ({ state }, query) => {
     state.query = query
   },
-  filter((_, query) => query.length > 2),
+  filter(({ state }) => state.query.length > 2),
   debounce(200),
-  async ({ state, effects }, query) => {
+  async ({ state, effects }) => {
     state.isSearching = true
-    state.searchResult = await effects.getSearchResult(query)
+    state.searchResult = await effects.getSearchResult(state.query)
     state.isSearching = false
   }
 )

SUMMARY.md

@@ -33,10 +33,10 @@
 ## Guides <a id="guides-1"></a>
 
 * [Using state machines](guides-1/using-state-machines.md)
+* [Using classes](guides-1/using-classes.md)
 * [Connecting components](guides-1/connecting-components.md)
 * [Managing lists](guides-1/managing-lists.md)
 * [State first routing](guides-1/state-first-routing.md)
-* [Move to Typescript](guides-1/move-to-typescript.md)
 * [Testing](guides-1/testing.md)
 * [Connecting to React Native](https://dev.to/brasilikum/how-to-setup-overmind-with-react-native-expo-optional-4mk5)
 
@@ -55,7 +55,7 @@
 * [lazy](api-1/lazy.md)
 * [merge](api-1/merge.md)
 * [namespaced](api-1/namespaced.md)
-* [onInitialize](api-1/oninitialize.md)
+* [onInitializeOvermind](api-1/oninitialize.md)
 * [operators](api-1/operators.md)
 * [reaction](api-1/reaction.md)
 * [rehydrate](api-1/rehydrate.md)

api-1/action.md

@@ -1,9 +1,7 @@
 # action
 
 ```typescript
-import { AsyncAction } from 'overmind'
-
-export const getPosts: AsyncAction = async ({ state, actions, effects }) => {
+export const getPosts = async ({ state, actions, effects }) => {
   state.isLoadingPosts = true
   state.posts = await effects.api.getPosts()
   state.isLoadingPosts = false
@@ -16,16 +14,14 @@ An action is where you write the logic of the application. Every action receives
 
 This _injected_ context allows Overmind to understand from where you are changing state and running effects. You can also use other actions defined in your application. Additionally with _injection_ your actions become highly testable as it can easily be mocked.
 
-State changes are restricted to these actions. That means if you try to change the state outside of an action you will get an error. The state changes are also scoped to the action. That means it does not matter if you perform the state change asynchronously, either by defining the action as an **async** function or for example use a **setTimeout**. You can change the state at any time within the action.
+State changes are restricted to these actions. That means if you try to change the state outside of an action you will get an error. The state changes are also scoped to the action. That means it does not matter if you perform the state change asynchronously, either by defining the action as an **async** function or for example use a **setTimeout**, returning a promise which is resolved when it times out.
 
 ## Payload
 
 When an action is called you can optionally pass it a payload. This payload is received as the second argument to the action.
 
 ```typescript
-import { Action } from 'overmind'
-
-export const setTitle: Action<string> = ({ state }, title) => {
+export const setTitle = ({ state }, title) => {
   state.title = title
 }
 ```
@@ -34,13 +30,3 @@ export const setTitle: Action<string> = ({ state }, title) => {
 There is only one argument, which means if you want to pass multiple values you have to do so with an object
 {% endhint %}
 
-## Typing
-
-There are two different action types in Overmind, **Action** and **AsyncAction**. Both of them takes an Input param and an Output param where both of them default to **void**.
-
-`Action<void, void>`
-
-`AsyncAction<void, void>`.
-
-The difference is that **AsyncAction** returns a Promise of the output, **Promise&lt;void&gt;**. Basically whenever you use an **async** action or explicitly return a promise from an action you should use the **AsyncAction** type.
-

api-1/addflushlistener.md

@@ -3,15 +3,11 @@
 The **addMutationListener** triggers whenever there is a mutation. The **addFlushListener** triggers whenever Overmind tells components to render again. It can have multiple mutations related to it.
 
 {% tabs %}
-{% tab title="overmind/onInitialize.ts" %}
+{% tab title="overmind/actions.js" %}
 ```typescript
-import { OnInitialize } from 'overmind'
-
-const onInitialize: OnInitialize = async ({ state, effects }, overmind) => {
+export const onInitializeOvermind = async ({ state, effects }, overmind) => {
   overmind.addFlushListener(effects.history.addMutations)
 }
-
-export default onInitialize
 ```
 {% endtab %}
 {% endtabs %}

api-1/addmutationlistener.md

@@ -3,19 +3,15 @@
 It is possible to listen to all mutations performed in Overmind. This allows you to create special effects based on mutations within a certain domain of your app, or whatever else you come up with. Note that this method triggers right after any mutation occurs, you might rather want to use **addFlushListener** to be notified about batched changes, like the components does.
 
 {% tabs %}
-{% tab title="overmind/onInitialize.ts" %}
+{% tab title="overmind/actions.js" %}
 ```typescript
-import { OnInitialize } from 'overmind'
-
-const onInitialize: OnInitialize = async ({ state, localStorage }, overmind) => {
+export const onInitializeOvermind = async ({ state, localStorage }, overmind) => {
   overmind.addMutationListener((mutation) => {
     if (mutation.path.indexOf('todos') === 0) {
       localStorage.set('todos', state.todos)
     }
   })
 }
-
-export default onInitialize
 ```
 {% endtab %}
 {% endtabs %}

api-1/createovermind.md

@@ -5,7 +5,6 @@ The **createOvermind** factory is used to create the application instance. You n
 {% tabs %}
 {% tab title="overmind/index.ts" %}
 ```typescript
-import { IConfig } from 'overmind'
 import { state } from './state'
 import * as effects from './effects'
 import * as actions from './actions'
@@ -15,11 +14,6 @@ export const config = {
   effects,
   actions
 }
-
-// For explicit typing check the Typescript guide
-declare module 'overmind' {
-  interface Config extends IConfig<typeof config> {}
-}
 ```
 {% endtab %}
 {% endtabs %}

api-1/derive.md

@@ -3,11 +3,11 @@
 You can add derived state to your application. You access derived state like any other value, there is no need to call it as a function. The derived value is cached and will only update when any accessed state changes.
 
 {% tabs %}
-{% tab title="overmind/state.ts" %}
+{% tab title="overmind/state.js" %}
 ```typescript
 import { derived } from 'overmind'
 
-export const state: State = {
+export const state = {
   items: [],
   completedItems: derived((state, rootState) => {
     return state.items.filter(item => item.completed)

api-1/effects.md

@@ -1,17 +1,15 @@
 # effects
 
 {% tabs %}
-{% tab title="overmind/effects.ts" %}
+{% tab title="overmind/effects.js" %}
 ```typescript
-import { User, Item } from './state'
-
 export const api = {
-  async getUser(): Promise<User> {
+  async getUser() {
     const response = await fetch('/user')
 
     return response.json()
   },
-  async getItem(id: number): Promise<Item> {
+  async getItem(id) {
     const response = await fetch(`/items/${id}`)
 
     return response.json()

api-1/merge.md

@@ -3,18 +3,13 @@
 Allows you to merge configurations together.
 
 {% tabs %}
-{% tab title="overmind/index.ts" %}
+{% tab title="overmind/index.js" %}
 ```typescript
-import {IConfig } from 'overmind'
 import { merge } from 'overmind/config'
 import * as moduleA from './moduleA'
 import * as moduleB from './moduleB'
 
 export const config = merge(moduleA, moduleB)
-
-declare module 'overmind' {
-  interface Config extends IConfig<typeof config> {}
-}
 ```
 {% endtab %}
 {% endtabs %}
@@ -24,11 +19,9 @@ Note that merge can be useful to combine a root configuration with **namespaced*
 {% tabs %}
 {% tab title="overmind/index.ts" %}
 ```typescript
-import {IConfig } from 'overmind'
 import { merge, namespaced, lazy } from 'overmind/config'
 import { state } from './state'
 import * as moduleA from './moduleA'
-import { Config as ModuleB } from './moduleB'
 
 export const config = merge(
   {
@@ -38,13 +31,9 @@ export const config = merge(
     moduleA
   }),
   lazy({
-    moduleB: async (): Promise<ModuleB> => await import('./moduleB').config
+    moduleB: async () => await import('./moduleB').config
   })
 )
-
-declare module 'overmind' {
-  interface Config extends IConfig<typeof config> {}
-}
 ```
 {% endtab %}
 {% endtabs %}

api-1/namespaced.md

@@ -9,7 +9,6 @@ So in Overmind isolation is a discipline, not a technical restriction.
 {% tabs %}
 {% tab title="overmind/index.ts" %}
 ```typescript
-import {IConfig } from 'overmind'
 import { namespaced } from 'overmind/config'
 import * as moduleA from './moduleA'
 import * as moduleB from './moduleB'
@@ -18,10 +17,6 @@ export const config = namespaced({
   moduleA,
   moduleB
 })
-
-declare module 'overmind' {
-  interface Config extends IConfig<typeof config> {}
-}
 ```
 {% endtab %}
 {% endtabs %}