Skip to content

Commit 5eaffb3

Browse files
christianalfonigitbook-bot
authored andcommitted
GitBook: [v28] 44 pages modified
1 parent 7df01b7 commit 5eaffb3

File tree

6 files changed

+37
-7
lines changed

6 files changed

+37
-7
lines changed

core/defining-state.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,9 @@ class LoginForm {
140140
}
141141
```
142142
{% endtab %}
143+
{% endtabs %}
143144

145+
{% tabs %}
144146
{% tab title="overmind/state.js" %}
145147
```javascript
146148
import { LoginForm } from './models'
@@ -235,7 +237,9 @@ class User {
235237
}
236238
```
237239
{% endtab %}
240+
{% endtabs %}
238241

242+
{% tabs %}
239243
{% tab title="overmind/actions.js" %}
240244
```typescript
241245
import { rehydrate } from 'overmind'
@@ -274,7 +278,9 @@ export const state = {
274278
}
275279
```
276280
{% endtab %}
281+
{% endtabs %}
277282

283+
{% tabs %}
278284
{% tab title="overmind/actions.js" %}
279285
```typescript
280286
import { rehydrate } from 'overmind'
@@ -338,7 +344,9 @@ export const state = {
338344
}
339345
```
340346
{% endtab %}
347+
{% endtabs %}
341348

349+
{% tabs %}
342350
{% tab title="overmind/actions.js" %}
343351
```typescript
344352
export const setUser = ({ state }, id) => {
@@ -362,7 +370,9 @@ export const state = {
362370
}
363371
```
364372
{% endtab %}
373+
{% endtabs %}
365374

375+
{% tabs %}
366376
{% tab title="overmind/actions.js" %}
367377
```typescript
368378
export const setUser = ({ state }, id) => {
@@ -399,7 +409,9 @@ export const config = {
399409
}
400410
```
401411
{% endtab %}
412+
{% endtabs %}
402413

414+
{% tabs %}
403415
{% tab title="index.js" %}
404416
```typescript
405417
import { createOvermind } from 'overmind'

core/going-functional.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -109,10 +109,6 @@ export const search = pipe(
109109
{% endtab %}
110110
{% endtabs %}
111111

112-
{% hint style="info" %}
113-
Note that we give all the actual operator functions the same name as the exported variable that creates it. The reason is that this name is picked up by the devtools and gives you more insight into how your code runs.
114-
{% endhint %}
115-
116112
Now, you might feel that we are just adding complexity here. An additional file with more syntax. But clean and maintainable code is not about less syntax. It is about structure, predictability and reusability. What we achieve with this functional approach is a super readable abstraction in our _actions_ file. There is no logic there, just references to logic. In our _operators_ file each piece of logic is defined in isolation with very little logic and it can be reused in any other composition.
117113

118114
## Calling operators
@@ -154,7 +150,9 @@ export const setValue = ({ state}, value) {
154150
}
155151
```
156152
{% endtab %}
153+
{% endtabs %}
157154

155+
{% tabs %}
158156
{% tab title="overmind/actions.js" %}
159157
```typescript
160158
import {pipe } from 'overmind'
@@ -191,7 +189,9 @@ export const setTitle = ({ state }, title) => {
191189
}
192190
```
193191
{% endtab %}
192+
{% endtabs %}
194193

194+
{% tabs %}
195195
{% tab title="overmind/actions.js" %}
196196
```typescript
197197
import { pipe } from 'overmind'

core/running-side-effects.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,9 @@ Let us just expose the [AXIOS](https://github.com/axios/axios) library as an **h
2020
export { default as http } from 'axios'
2121
```
2222
{% endtab %}
23+
{% endtabs %}
2324

25+
{% tabs %}
2426
{% tab title="overmind/index.js" %}
2527
```typescript
2628
import { state } from './state'
@@ -161,7 +163,9 @@ export const socket = (() => {
161163
})()
162164
```
163165
{% endtab %}
166+
{% endtabs %}
164167

168+
{% tabs %}
165169
{% tab title="overmind/actions.js" %}
166170
```typescript
167171
export const onInitializeOvermind = async ({ state, effects, actions }) => {

core/server-side-rendering.md

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@ export const config = {
1616
}
1717
```
1818
{% endtab %}
19+
{% endtabs %}
1920

21+
{% tabs %}
2022
{% tab title="index.ts" %}
2123
```typescript
2224
import { createOvermind } from 'overmind'
@@ -31,14 +33,14 @@ Here we only export the configuration from the main Overmind file. The instantia
3133

3234
## Preparing effects
3335

34-
The effects will also be shared with the server. Typically this is not an issue, but you should be careful about creating effects that run logic when they are defined. You might also consider lazy-loading effects so that you avoid loading them on the server at all. You can read more about them in [EFFECTS](running-side-effects.md).
36+
The effects will also be shared with the server. Typically this is not an issue, but you should be careful about creating effects that run logic when they are defined. You might also consider lazy-loading effects so that you avoid loading them on the server at all. You can read more about that in [EFFECTS](running-side-effects.md).
3537

3638
## Rendering on the server
3739

3840
When you render your application on the server you will have to create an instance of Overmind designed for running on the server. On this instance you can change the state and provide it to your components for rendering. When the components have rendered you can **hydrate** the changes and pass them along to the client so that you can **rehydrate**.
3941

4042
{% hint style="info" %}
41-
Overmind does not hydrate the state, but the mutations you performed. That means it minimizes the payload passed over the wire.
43+
Overmind does not hydrate the actual state, but the mutations you performed. That means it minimizes the payload passed over the wire.
4244
{% endhint %}
4345

4446
The following shows a very simple example using an [EXPRESS](https://expressjs.com/) middleware to return a server side rendered version of your app.
@@ -78,7 +80,7 @@ export default async (req, res) => {
7880

7981
## Rehydrate on the client
8082

81-
On the client you just want to make sure that your Overmind instance rehydrates the mutations performed on the server so that when the client renders, it does so with the same state. The **onInitialize** hook of Overmind is the perfect spot to do this.
83+
On the client you just want to make sure that your Overmind instance rehydrates the mutations performed on the server so that when the client renders, it does so with the same state. The **onInitializeOvermind** hook of Overmind is the perfect spot to do this.
8284

8385
{% tabs %}
8486
{% tab title="overmind/actions.ts" %}
@@ -110,7 +112,9 @@ export const onInitializeOvermind = () => {
110112
}
111113
```
112114
{% endtab %}
115+
{% endtabs %}
113116

117+
{% tabs %}
114118
{% tab title="client/index.js" %}
115119
```typescript
116120
import { createOvermind } from 'overmind'
@@ -120,7 +124,9 @@ const overmind = createOvermind(config)
120124
overmind.actions.onInitializeOvermind()
121125
```
122126
{% endtab %}
127+
{% endtabs %}
123128

129+
{% tabs %}
124130
{% tab title="server/index.js" %}
125131
```javascript
126132
import { createOvermindSSR } from 'overmind'

core/writing-application-logic.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ export const myAction = (context) => {
1212
}
1313
```
1414
{% endtab %}
15+
{% endtabs %}
1516

17+
{% tabs %}
1618
{% tab title="overmind/index.js" %}
1719
```typescript
1820
import * as actions from './actions'
@@ -90,7 +92,9 @@ export const internalActionA = ({ state, effects, actions }, value) {}
9092
export const internalActionB = async ({ state, effects, actions }) {}
9193
```
9294
{% endtab %}
95+
{% endtabs %}
9396

97+
{% tabs %}
9498
{% tab title="overmind/actions.ts" %}
9599
```typescript
96100
import { Action } from 'overmind'

quickstart.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,9 @@ export const state = {
4040
}
4141
```
4242
{% endtab %}
43+
{% endtabs %}
4344

45+
{% tabs %}
4446
{% tab title="overmind/index.js" %}
4547
```typescript
4648
import { state } from './state'
@@ -50,7 +52,9 @@ export const config = {
5052
}
5153
```
5254
{% endtab %}
55+
{% endtabs %}
5356

57+
{% tabs %}
5458
{% tab title="index.js" %}
5559
```typescript
5660
import { createOvermind } from 'overmind'

0 commit comments

Comments
 (0)