You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/overmind-website/guides/beginner/01_getstarted.md
+9-9Lines changed: 9 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,13 +10,13 @@ When you have your project up and running install the Overmind dependency by usi
10
10
h(Example, { name: "guide/getstarted/install" })
11
11
```
12
12
13
-
Great, we are good to go! In this guide we will create a very simple application, but we will use the conventions for structuring a scalable app. That means we will be creating some files that seems unnecessary, but this is just as important as learning the API.
13
+
Great, we are good to go! In this guide we will create a very simple application, but we will use the conventions for structuring a scalable app. That means we will be creating some files that seem unnecessary, but this is just as important as learning the API.
14
14
15
15
## Our first state
16
16
17
17
Applications are about state and we are going to introduce our first state, **isLoadingPosts**. Typically you would be tempted to isolate this state in your component, but this is exactly what Overmind discourages. In Overmind you rather define the state of your application outside of your view layer. This gives you several benefits which will become clear as we move on.
18
18
19
-
In your component we are going to imagine that we recieve the Overmind application:
19
+
In the component we are going to imagine that we receive the Overmind application:
Functions used with the **mutate** operator are passed the current state of the application and the current value of the action. These functions are the only functions allowed to change the state of your application. This restriction combined with being just a simple function gives you several benefits as you will learn more about diving into Overmind.
53
+
Functions used with the **mutate** operator are passed the current state of the application and the current value of the action. These functions are the only functions allowed to change the state of your application. This restriction combined with being just a simple function gives you several benefits as you will see when diving deeper into Overmind.
54
54
55
55
## Operations
56
56
57
-
All logic that is not related to changing the state of the application is considered an operation. These functions has different signatures based on what**operator** consumes it in an action. In this example we are using the **map** operator which expects a function that receives all the **effects** configured for your application as the first argument, and the current value of the action as the second argument.
57
+
All logic that is not related to changing the state of the application is considered an operation. These functions have different signatures based on the**operator** that consumes it in an action. In this example we are using the **map** operator which expects a function that receives all the **effects** configured for your application as the first argument, and the current value of the action as the second argument.
By default the **effects**holds the state of the application, but we want to extend it with a **jsonPlaceholder** api. Let us look at effects.
63
+
By default the **effects**contain the state of the application, but here, we also want to extend it with a **jsonPlaceholder** api. Let us look at effects.
64
64
65
65
## Effects
66
66
67
67
```marksy
68
68
h(Example, { name: "guide/getstarted/effects" })
69
69
```
70
70
71
-
You can expose any kind of side effects to your Overmind instance. Think of it as injecting libraries and tools. So this could for example be the [axios]() library itself, some class instance you create or just a plain object as we see in this example. Doing this injection keeps your operation functions pure and Overmind knows when they are accessed.
71
+
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]() library itself, some class instance we created or just a plain object as we see in this example. Doing this injection keeps our operation functions pure and Overmind knows when these injected libraries are accessed.
72
72
73
73
## Devtools
74
74
75
-
All of this is pretty okay. You might not see the benefits of writing your application code this way and that is prefectly okay. It is usually when you start to manage more complexity the benefits become clear. But let us give you one big benefit right out of the box. In your**package.json** file add the following and the run the script.
75
+
At this stage, the benefits of writing an application code this way might not be obvious. It is usually when we start to deal with more complexity that the benefits become more obvious. But even with a somple app, there is one big benefit that comes right out of the box. In our**package.json** file, we add the following and the run the script.
76
76
77
77
```marksy
78
78
h(Example, { name: "guide/getstarted/devtools" })
79
79
```
80
80
81
-
The Overmind devtools is a pretty amazing experience. You get insight into all the state, changes to that state, actions run, side effects run and general stats. This visual overview becomes more and more valuable as well as complexity increases in your application.
81
+
The Overmind devtools provides us with a pretty amazing experience. We get insights into all the state, changes to that state, actions run, which side effects are run and general stats. This visual overview becomes more and more valuable as complexity increases.
82
82
83
83
To connect to the devtools simply start the devtools application and refresh your app.
84
84
85
85
## Summary
86
86
87
-
You have now stepped your toes into Overmind. Please continue this example to actually display the posts fetched. In the devtools you will see how the component will become quite bloated with dependencies to state, which is actually a general problem with lists and components. You can read more about how to manage lists in later guides, but we wanted to point out that the devtools already now helps you identify possible issues with your application.
87
+
You have now stepped your toes into Overmind. Please continue this example to actually display the posts fetched. In the devtools you will see how the component will become quite bloated with dependencies to state, which is actually a general problem with lists and components. You can read more about how to manage lists in a later guide, but we wanted to point out that the devtools can already helps us identify possible issues with the application.
0 commit comments