diff --git a/04-store-login/README.md b/04-store-login/README.md
index 2c44bc6..c7d9e38 100644
--- a/04-store-login/README.md
+++ b/04-store-login/README.md
@@ -16,7 +16,7 @@ Let's start by learning how _stores_ work: in this example we will learn how to
# Step By Step Guide
-- This example will take a starting point _00-scratch-typescript_
+- This example will take a starting point _00-boiler-typescript_
- Let's install the packages.
@@ -63,7 +63,6 @@ _./src/pages/login-page.svelte_
width: 300px;
}
-
```
_./src/pages/home-page.svelte_
@@ -105,7 +104,7 @@ _./src/pages/home-page.svelte_
_./src/pages/index.ts_
-```svelte
+```ts
export { default as LoginPage } from "./login-page.svelte";
export { default as HomePage } from "./home-page.svelte";
```
@@ -134,7 +133,7 @@ _./src/common/navbar.svelte_
_./src/common/index.ts_
-```svelte
+```ts
export { default as NavBar } from "./navbar.svelte";
```
@@ -156,23 +155,23 @@ _./src/App.svelte_
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
```
@@ -181,18 +180,18 @@ _./src/App.svelte_
_./src/pages/login-page.svelte_
```diff
-
-
-
-
Login Page
-
--
-+
-
+
+
+
+
Login Page
+
+-
++
+
```
- Let's give a try to what we have created:
@@ -206,7 +205,7 @@ npm run dev
- Login page.
- Home page.
-- And there's a common component called _navBar_ that will be displayed on top of the app.
+- And there's a common component called _NavBar_ that will be displayed on top of the app.
The behavior that we want to achieve:
@@ -214,9 +213,9 @@ The behavior that we want to achieve:
- The navBar should change to display the user's name.
- The home page should change to display the user's name.
-Once that we are on the home page we want to be able to update the login name and this change should be reflected on the navBar and on the home page.
+Once that we are on the home page we want to be able to update the login name and this change should be reflected on the nav bar and on the home page.
-The userInformation should be globally accesible, so we don't need to pass it around using props.
+The user information should be globally accessible, so we don't need to pass it around using props.
It seems like a good idea to use a _writable store_ to share the data.
@@ -226,9 +225,9 @@ Let's go for it:
case we will store an object, so we can check the difference between replacing
the value and updating it.
-We can create an store
+In order to create a store:
-- We will import _writable_ store from _svelte-store_: this will allow
+- We will import _writable_ store from _svelte-store_. This will allow
us to hold a global data and be able to update it.
- Then we will initialize the store with the initial value, it could be a simple string,
@@ -257,24 +256,24 @@ export * from "./user.store";
_./src/pages/login-page.svelte_
```diff
-
-
-
-
Login Page
-
--
-+
-
+
+
+
+
Login Page
+
+-
++
+
```
- If we use _set_ we are replacing the whole object without taking into consideration the previous value, we may want to keep a reference to the old object and use the spread operator to keep the previous values and just replace only the one affected by the change, we can do this by using the store _update_ method, it could be something like:
@@ -283,13 +282,13 @@ _./src/pages/login-page.svelte_
```diff
const handleLogin = (e) => {
-- userInfoStore.set({ username });
-+ userInfoStore.update(previous => ({ ...previous, username }));
+- userInfoStore.set({ username });
++ userInfoStore.update(previous => ({ ...previous, username }));
navigate("/home");
};
```
-- Cool, now let's hop onto the _navBar_ component and display the user's name:
+- Cool! Now let's hop onto the _NavBar_ component and display the user's name:
- We will import the _userInfoStore_ that we have created.
- We will start by subscribing to store changes, and then update user Info.
@@ -310,43 +309,43 @@ _./src/common/navbar.svelte_
+
User Logged in: {userInfo.username}
```
-This approach is okeish but we would have to take care of doing even some cleanup in the component (unsubscribe), Svelte offers us a short cut (just a reactive assignment):
+This approach is ok-ish but we would have to take care of doing even some cleanup in the component (unsubscribe), Svelte offers us a short cut (just a reactive assignment):
- To access the value of the _userInfoStore_ we have to prefix the store with the
_$_ sign,
- We will ask to listen the userInfoStore for changes, in order to use this value we have to use the _$_ sign again (in this case to make reactive this piece of code, this would be similar
- in React to useEffect [userInfoStore]).
+ in React to adding _userInfoStore_ to the dependencies of _useEffect_).
_./src/common/navbar.svelte_
```diff
-
+
User Logged in: {userInfo.name}
```
-> Note we don't need to define the _userInfoStore_ using _let_, _Svelte_ will detect this and
+> Note we don't need to declare _userInfoStore_ using _let_, _Svelte_ will detect this and
> initialize it for us.
This is not bad, buuuuuut.... we can give it one more turn :), since we are using _$userInfoStore_
this is reactive a statement (tip $ prefix :)), why not just use it directly in our _html_:
```diff
-
+
--
User Logged in: {userInfo.name}
-+
User Logged in: {$userInfoStore.username}
+-
User Logged in: {userInfo.name}
++
User Logged in: {$userInfoStore.username}
```
- Let's jump into the home page, in this page we got a button that toggles the user's name
@@ -359,36 +358,36 @@ How this could work:
_./src/pages/home-page.svelte_
```diff
-
-
-
-
Home page
-
-{#if showLoggedInUser}
--
Here we should show the logged in user
-+
logged in user: {$userInfoStore.username}
-{/if}
-
+ let showLoggedInUser = false;
+
+
+
+
Home page
+
+ {#if showLoggedInUser}
+-
Here we should show the logged in user
++
logged in user: {$userInfoStore.username}
+ {/if}
+
```
- So far so good, but now let's go for a twist, we want to be able to update the user's name, from the home page, we can just bind
to _userInfo.username_
```diff
-{#if showLoggedInUser}
-