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/02_getstarted.md
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,11 +5,11 @@ If you are moving from an existing state management solution, please read the re
5
5
To get started with Overmind you have to set up a project. You can do this with whatever tool your framework of choice provides or you can use [webpack](https://webpack.js.org/) or [parceljs](https://parceljs.org/). You can also use [codesandbox.io](https://codesandbox.io/) to play around with Overmind directly in the browser.
6
6
7
7
```marksy
8
-
h(Notice, null, "Due to using the Proxy feature of JavaScript, Overmind does not support **Internet Explorer 11**. Though did you know IE 11 mode is coming to [Microsofts next browser](https://www.pcworld.com/article/3393198/microsoft-edge-ie-mode.html)?")
8
+
h(Notice, null, "Due to using the Proxy feature of JavaScript, Overmind does not support **Internet Explorer 11**. Though did you know IE 11 mode is coming to [Microsoft's next browser](https://www.pcworld.com/article/3393198/microsoft-edge-ie-mode.html)?")
9
9
```
10
10
11
11
12
-
When you have your project up and running install the Overmind dependency by using [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/en/):
12
+
When you have your project up and running, install the Overmind dependency by using [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/en/):
13
13
14
14
```marksy
15
15
h(Example, { name: "guide/getstarted/install" })
@@ -41,7 +41,7 @@ The devtools should respond when you open up your application:
41
41
42
42

43
43
44
-
Now that we have our state in place, lets change it.
44
+
Now that we have our state in place, let's change it.
45
45
46
46
## Changing state
47
47
@@ -58,13 +58,13 @@ To trigger this action, go to the **actions** tab in the development tool and ru
58
58
59
59
## Creating effects
60
60
61
-
State management tools has a tendency to end their introduction here, but Overmind helps you manage one more important ingredient, **effects**. An effect, or side effect, is everything from doing http requests to storing data in local storage. What Overmind helps you with is separating the generic low level APIs of using effects from your actual application logic inside actions. Let us look at an example. We are simply going to grab a random number from "somewhere out there":
61
+
State management tools have a tendency to end their introduction here, but Overmind helps you manage one more important ingredient, **effects**. An effect, or side effect, is everything from doing HTTP requests to storing data in local storage. What Overmind helps you with is separating the generic low level APIs of using effects from your actual application logic inside actions. Let us look at an example. We are simply going to grab a random number from "somewhere out there":
62
62
63
63
```marksy
64
64
h(Example, { name: "guide/getstarted/effect" })
65
65
```
66
66
67
-
As you can see we separated the low level generic code of creating a random number from our actual application logic in the action. Think of effects as the API you custom tailor to your application. There are several benefits to effects, which you can read about later, but the really important thing is that you separate the tools you are using from your actual application. That means you can at any time replace this custom random number generator with some existing tool or maybe you will grab it from the server? This is also true for everything else. If your application needs posts you will create a **getPosts** effect. It does not matter to the application if this comes from a restful API, graphql or whatever other source. It is an implementation detail.
67
+
As you can see we separated the low level generic code of creating a random number from our actual application logic in the action. Think of effects as the API you custom tailor to your application. There are several benefits to effects, which you can read about later, but the really important thing is that you separate the tools you are using from your actual application. That means you can at any time replace this custom random number generator with some existing tool or maybe you will grab it from the server? This is also true for everything else. If your application needs posts you will create a **getPosts** effect. It does not matter to the application if this comes from a restful API, GraphQL or whatever other source. It is an implementation detail.
68
68
69
69
With our effect in place, let us run the actions again:
70
70
@@ -78,12 +78,12 @@ Now that we know our application works as expected we can actually produce the U
Now you can run the actions by clicking the buttons in the UI and the devtools continues to track their execution giving you valuable insight into what happens inside your app.
81
+
Now you can run the actions by clicking the buttons in the UI and the devtool continues to track their execution giving you valuable insight into what happens inside your app.
82
82
83
83
## Hot Module Replacement
84
84
85
85
A popular concept introduced by Webpack is [HMR](https://webpack.js.org/concepts/hot-module-replacement/). It allows you to make changes to your code without having to refresh. Overmind automatically supports HMR. That means when **HMR** is activated Overmind will make sure it updates and manages its state, actions and effects. Even the devtools will be updated as you make changes.
86
86
87
87
## Summary
88
88
89
-
You have now stepped your toes into Overmind. We introduced Overmind with the concept of thinking the UI as an implementation detail, but it is totally up to you have you want to separate the responsibilities of states and logic in your application. Please continue reading guides to learn more about how Overmind scales.
89
+
You have now stepped your toes into Overmind. We introduced Overmind with the concept of thinking of the UI as an implementation detail, but it is totally up to you how you want to separate the responsibilities of states and logic in your application. Please continue reading guides to learn more about how Overmind scales.
0 commit comments