Skip to content

Commit f90a7f2

Browse files
authored
Tweak guide 02_getstarted for fluency
1 parent 1385e79 commit f90a7f2

File tree

1 file changed

+7
-7
lines changed

1 file changed

+7
-7
lines changed

packages/overmind-website/guides/beginner/02_getstarted.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@ If you are moving from an existing state management solution, please read the re
55
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.
66

77
```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)?")
99
```
1010

1111

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/):
1313

1414
```marksy
1515
h(Example, { name: "guide/getstarted/install" })
@@ -41,7 +41,7 @@ The devtools should respond when you open up your application:
4141

4242
![open_devtool](/images/devtool_state.png)
4343

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.
4545

4646
## Changing state
4747

@@ -58,13 +58,13 @@ To trigger this action, go to the **actions** tab in the development tool and ru
5858

5959
## Creating effects
6060

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":
6262

6363
```marksy
6464
h(Example, { name: "guide/getstarted/effect" })
6565
```
6666

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.
6868

6969
With our effect in place, let us run the actions again:
7070

@@ -78,12 +78,12 @@ Now that we know our application works as expected we can actually produce the U
7878
h(Example, { name: "guide/getstarted/connectapp" })
7979
```
8080

81-
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.
8282

8383
## Hot Module Replacement
8484

8585
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.
8686

8787
## Summary
8888

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

Comments
 (0)