Translate "Separating Events from Effects" #609
Conversation
|
お待たせして申し訳ございません。レビューよろしくお願いします！ |
Size changes📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖 Three Pages Changed SizeThe following pages changed size from the code in this PR compared to its base branch:
DetailsOnly the gzipped size is provided here based on an expert tip. First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If Any third party scripts you have added directly to your app using the Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this. |
|
@smikitky こちらのレビューもお願いできると助かります 🙏 |
|
ちょっと勘違いしてこちらが後回しになっており申し訳ありません。 |
|
|
||
| Fix it so that when you switch from "general" to "travel" and then to "music" very quickly, you see two notifications, the first one being "Welcome to travel" and the second one being "Welcome to music". (For an additional challenge, assuming you've *already* made the notifications show the correct rooms, change the code so that only the latter notification is displayed.) | ||
| "general" から "travel"、そして "music" に素早く切り替えると、2 つの通知が表示され、1 つ目は "Welcome to travel"、2 つ目は "Welcome to music" と表示されるように修正してください。(追加の課題として、*すでに*通知が正しい部屋を表示するようになっていると仮定して、後者の通知のみが表示されるようにコードを変更してみてください。) |
There was a problem hiding this comment.
| "general" から "travel"、そして "music" に素早く切り替えると、2 つの通知が表示され、1 つ目は "Welcome to travel"、2 つ目は "Welcome to music" と表示されるように修正してください。(追加の課題として、*すでに*通知が正しい部屋を表示するようになっていると仮定して、後者の通知のみが表示されるようにコードを変更してみてください。) | |
| "general" から "travel"、そして "music" に素早く切り替えると、2 つの通知が表示され、1 つ目は "Welcome to travel"、2 つ目は "Welcome to music" と表示されるように修正してください。（追加の課題として、*すでに*通知が正しい部屋を表示するようになっていると仮定して、後者の通知のみが表示されるようにコードを変更してみてください。） |
|
|
||
| Your Effect Event is called with a two second delay. If you're quickly switching from the travel to the music room, by the time the travel room's notification shows, `roomId` is already `"music"`. This is why both notifications say "Welcome to music". | ||
| エフェクトイベントは、2 秒間の遅延を伴って呼び出されます。travel room から music room に素早く切り替える場合、travel room の通知が表示される頃には、`roomId` は既に `"music"` になっています。そのため、両方の通知で "Welcome to music" と表示されます。 |
There was a problem hiding this comment.
| エフェクトイベントは、2 秒間の遅延を伴って呼び出されます。travel room から music room に素早く切り替える場合、travel room の通知が表示される頃には、`roomId` は既に `"music"` になっています。そのため、両方の通知で "Welcome to music" と表示されます。 | |
| 今回のエフェクトイベントは、2 秒間の遅延を伴って呼び出されます。travel ルームから music ルームに素早く切り替える場合、travel ルームの通知が表示される頃には、`roomId` は既に `"music"` になっています。そのため、両方の通知で "Welcome to music" と表示されます。 |
|
|
||
| To fix the issue, instead of reading the *latest* `roomId` inside the Effect Event, make it a parameter of your Effect Event, like `connectedRoomId` below. Then pass `roomId` from your Effect by calling `onConnected(roomId)`: | ||
| この問題を解決するには、エフェクトイベントの中で*最新の* `roomId` を読み込むのではなく、以下の `connectedRoomId` のように、エフェクトイベントのパラメータとして `roomId` を指定します。そして、`onConnected(roomId)` を呼び出すことで、エフェクトから `roomId` を渡します： |
There was a problem hiding this comment.
| この問題を解決するには、エフェクトイベントの中で*最新の* `roomId` を読み込むのではなく、以下の `connectedRoomId` のように、エフェクトイベントのパラメータとして `roomId` を指定します。そして、`onConnected(roomId)` を呼び出すことで、エフェクトから `roomId` を渡します： | |
| この問題を解決するには、エフェクトイベントの中で*最新の* `roomId` を読み込むのではなく、以下の `connectedRoomId` のように、エフェクトイベントのパラメータとして指定するようにします。そして、`onConnected(roomId)` のように呼び出すことで、エフェクトから `roomId` を渡します： |
| @@ -1694,9 +1692,9 @@ label { display: block; margin-top: 10px; } | |||
|
|
|||
| </Sandpack> | |||
|
|
|||
| The Effect that had `roomId` set to `"travel"` (so it connected to the `"travel"` room) will show the notification for `"travel"`. The Effect that had `roomId` set to `"music"` (so it connected to the `"music"` room) will show the notification for `"music"`. In other words, `connectedRoomId` comes from your Effect (which is reactive), while `theme` always uses the latest value. | |||
| `roomId` が `"travel"` に設定されていたエフェクト（`"travel"` ルームに接続していた）には、`"travel"` の通知が表示されます。`roomId` が `"music"` に設定された（つまり `"music"` ルームに接続した）エフェクトは、`"music"` に対する通知を表示します。つまり、`connectedRoomId` はエフェクト（リアクティブなもの）に由来し、`theme` は常に最新の値を使用します。 | |||
There was a problem hiding this comment.
| `roomId` が `"travel"` に設定されていたエフェクト（`"travel"` ルームに接続していた）には、`"travel"` の通知が表示されます。`roomId` が `"music"` に設定された（つまり `"music"` ルームに接続した）エフェクトは、`"music"` に対する通知を表示します。つまり、`connectedRoomId` はエフェクト（リアクティブなもの）に由来し、`theme` は常に最新の値を使用します。 | |
| `roomId` が `"travel"` に設定された（つまり `"travel"` ルームに接続したときの）エフェクトは、`"travel"` の通知を表示します。`roomId` が `"music"` に設定された（つまり `"music"` ルームに接続したときの）エフェクトは、`"music"` に対する通知を表示します。つまり、`connectedRoomId` はエフェクト（リアクティブなもの）に由来し、一方で `theme` は常に最新の値を使用するのです。 |
|
|
||
| To solve the additional challenge, save the notification timeout ID and clear it in the cleanup function of your Effect: | ||
| この追加の課題を解決するには、通知のタイムアウト ID を保存し、エフェクトのクリーンアップ関数でクリアしてください： |
There was a problem hiding this comment.
| この追加の課題を解決するには、通知のタイムアウト ID を保存し、エフェクトのクリーンアップ関数でクリアしてください： | |
| 追加の課題を解決するには、通知のタイムアウト ID を保存し、エフェクトのクリーンアップ関数でクリアしてください： |
|
@kotaesaki |
|
@koba04 今週日曜までに修正させていただきます。よろしくお願いいたします。 |
|
@kotaesaki いえいえ、お時間ある時で大丈夫ですのでよろしくお願いします！🙇♂️ |
Co-authored-by: Soichiro Miki <smiki-tky@umin.ac.jp>
Co-authored-by: Soichiro Miki <smiki-tky@umin.ac.jp>
"Separating Events from Effects"の翻訳です！