add tutorial: to-da-an-hanh-voi-redux-nhu-the-nao

vhnam · Sep 7, 2018 · a469b16 · a469b16
1 parent 4a21c50
commit a469b16
Show file tree

Hide file tree

Showing 15 changed files with 436 additions and 1 deletion.
diff --git a/sitemap.xml b/sitemap.xml
@@ -1,5 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">
+    <url>
+        <loc>https://vhnam.github.io/tutorials/to-da-an-hanh-voi-redux-nhu-the-nao/</loc>
+        <lastmod>2018-09-07</lastmod>
+    </url>
     <url>
         <loc>https://vhnam.github.io/tutorials/ui-101/</loc>
         <lastmod>2018-09-06</lastmod>

diff --git a/src/content/tutorials/to-da-an-hanh-voi-redux-nhu-the-nao/config.json b/src/content/tutorials/to-da-an-hanh-voi-redux-nhu-the-nao/config.json
@@ -0,0 +1,6 @@
+{
+    "headline": "Tớ đã ăn hành với Redux như thế nào?",
+    "description": "Chia sẻ cách tiếp cận Redux cho người mới bắt đầu",
+    "time": "Ngày 7 tháng 9 năm 2018",
+    "dateTime": "2018-09-07"
+}
diff --git a/src/content/tutorials/to-da-an-hanh-voi-redux-nhu-the-nao/img/init.png b/src/content/tutorials/to-da-an-hanh-voi-redux-nhu-the-nao/img/init.png
diff --git a/src/content/tutorials/to-da-an-hanh-voi-redux-nhu-the-nao/img/redux-flow.png b/src/content/tutorials/to-da-an-hanh-voi-redux-nhu-the-nao/img/redux-flow.png
diff --git a/src/content/tutorials/to-da-an-hanh-voi-redux-nhu-the-nao/img/run.png b/src/content/tutorials/to-da-an-hanh-voi-redux-nhu-the-nao/img/run.png
diff --git a/src/content/tutorials/to-da-an-hanh-voi-redux-nhu-the-nao/img/thumbnails.jpg b/src/content/tutorials/to-da-an-hanh-voi-redux-nhu-the-nao/img/thumbnails.jpg
diff --git a/src/content/tutorials/to-da-an-hanh-voi-redux-nhu-the-nao/index.html b/src/content/tutorials/to-da-an-hanh-voi-redux-nhu-the-nao/index.html
@@ -0,0 +1,101 @@
+<p>
+    Để chuẩn bị cho công cuộc phỏng vấn vì miếng ăn, tớ phải tranh thủ tìm hiểu React và các công nghệ liên quan, trong đó có Redux. Đường cách mạng còn lắm gian truân, đọc document của nó éo hiểu gì hết. Hôm nay chia sẻ với mọi người cách tiếp cận Redux.
+</p>
+<img src="img/thumbnails.jpg" alt="thumbnails" itemprop="image">
+
+<h2>Đặt vấn đề</h2>
+<p>
+    Khi lập trình React, điều đầu tiên bực bội nhất là việc quản lý State. Như hình phía trên, để truyền dữ liệu giữa các component khá là lằng nhằng do chỉ truyền được cho component kề nhau. Do đó, cần có một cơ chế để quản lý state riêng biệt.
+</p>
+
+<h2>Giải pháp</h2>
+<p>
+    Ok, dễ nhất thì ta cứ xem state như biến toàn cục, khi cần thì viết Get/Set bình thường. Tớ có nghĩ đến <code>localStorage</code>. Tuy nhiên cách này khá bưởi, bạn có thể xem thêm tại đây.<br><a itemprop="url" href="https://dev.to/rdegges/please-stop-using-local-storage-1i04">Please Stop Using Local Storage</a>
+</p>
+<p>
+    Thử cách khác, ta hỏi chị Google. Kết quả là ta được 2 giải pháp đó là <a itemprop="url" href="https://facebook.github.io/flux/">Flux</a> và <a itemprop="url" href="https://redux.js.org/">Redux</a>. Về phần Flux, ta có thể xem bài tutorial sau đây là hình dung được tư tưởng. Còn Redux, nó khá là hại não.<br>
+    Xem bài <a itemprop="url" href="https://kipalog.com/posts/Huong-dan-va-giai-thich-Flux-bang-hinh-ve">Hướng dẫn và giải thích Flux bằng hình vẽ</a>
+</p>
+
+<h2>Redux</h2>
+<p>
+    Giờ mới là phần chính. Ta thử vào xem trang chủ của Redux tại <a itemprop="url" href="https://redux.js.org">https://redux.js.org</a> xem có hiểu gì không nhé. Chắc cú là không dành cho beginner rồi. Tớ phải xem bài viết <a itemprop="url" href="https://www.valentinog.com/blog/react-redux-tutorial-beginners/">React Redux Tutorial for Beginners: The Definitive Guide (2018)</a> mới hình dung được Redux như thế nào.
+</p>
+<p>
+    Về cơ bản, Redux là một thư viện quản lý state, nó độc lập với React. Do đó, Redux có thể sử dụng chung với các thư viện khác vẫn được.
+</p>
+<p>
+    Các thành phần cơ bản của Redux bao gồm:
+</p>
+<ul>
+    <li>
+        <strong>Store</strong> - Nơi lưu trữ state
+    </li>
+    <li>
+        <strong>Actions</strong> - Các hành động truyền dữ liệu được gởi từ ứng dụng đến Store
+    </li>
+    <li>
+        <strong>Reducer</strong> - Xác định cách thay đổi State
+    </li>
+</ul>
+<img src="img/redux-flow.png" alt="Redux flow" itemprop="image">
+
+<h2>Ăn hành</h2>
+<p>
+    Bây giờ tớ sẽ minh hoạ cho các bạn hiểu cách chạy bình thường của Redux nhé. Lúc này, ta chỉ đụng mỗi Redux thôi.
+</p>
+<img src="img/init.png" alt="Initial" itemprop="image">
+<p>
+    Đầu tiên, Reducer sẽ khởi tạo State và cách xác định thay đổi State. Sau đó, khởi tạo Store bằng Reducer đã khởi tạo trước đó. Lúc này, ta khai báo tiếp hành động.
+</p>
+<script src="https://gist.github.com/vhnam/b56f6661bc95057961a233f5b38dd2b4.js"></script>
+<script src="https://gist.github.com/vhnam/b695f7082778fe63fb6a4f9f7074c939.js"></script>
+<script src="https://gist.github.com/vhnam/b29b7c49d20c44a28f4287a8c9841dd5.js"></script>
+<p>
+    Quá trình khởi tạo đã hoàn tất, ta khởi tạo tiếp một chút để bắt đầu test.
+</p>
+<script src="https://gist.github.com/vhnam/3905ccb9f99e5fd97f9785ede7d5fb4a.js"></script>
+<p>
+    Bây giờ, bạn thử chạy đoạn code dưới đây ở Developer Tool.
+</p>
+<script src="https://gist.github.com/vhnam/69c90b4df305f2fcf7406066a6e43e0b.js"></script>
+<img src="img/run.png" alt="Running Redux" itemprop="image">
+<p>
+    Như bạn đã thấy, phía Store sẽ dispatch thằng ku Actions là State được thay đổi rồi. Như thế, ta có thể cho State tách biệt khỏi mớ Components. 
+</p>
+
+<h2>Ăn hành cùng với React</h2>
+<p>
+    Ban đầu tớ nghĩ chúng ta có thể import Store vào nơi cần gọi là được. Nhưng giang hồ dùng chiêu thức khác, họ mapping State của Components với State của Store. Thặc vi diệu!!!
+</p>
+<p>
+    Để triển được chiêu thức đó, ta cần cài thêm package <code>react-redux</code>. Ghi nhớ khẩu quyết của chiêu thức này.
+</p>
+<ul>
+    <li>
+        <strong>mapStateToProps</strong> - dùng để map State của Component với State trong Store của Redux
+    </li>
+    <li>
+        <strong>mapDispatchToProps</strong> - dùng để map method của Component với lời gọi action từ Store tới Actions của Redux
+    </li>
+</ul>
+<p>
+    Sau đây là cách sử dụng.
+</p>
+<script src="https://gist.github.com/vhnam/0abecd5aedb2e050f836805e93a8e609.js"></script>
+<script src="https://gist.github.com/vhnam/b7567ba6bc8e557c5b5a1651e9de51f2.js"></script>
+
+<h2>Chốt hạ</h2>
+<p>
+    Hy vọng với cách trình bày của mình, các bạn hình dung được tư tưởng của Redux, cách dùng Redux với React như thế nào.
+</p>
+
+<h2>Tham khảo</h2>
+<ul class="reference">
+    <li>
+        Kipalog, <a itemprop="url" href="https://kipalog.com/posts/Huong-dan-va-giai-thich-Flux-bang-hinh-ve">Hướng dẫn và giải thích Flux bằng hình vẽ</a>
+    </li>
+    <li>
+        Valentinog, <a itemprop="url" href="https://www.valentinog.com/blog/react-redux-tutorial-beginners/">React Redux Tutorial for Beginners: The Definitive Guide (2018)</a>
+    </li>
+</ul>
diff --git a/src/indexes/tutorials.json b/src/indexes/tutorials.json
@@ -1,5 +1,12 @@
 {
     "tutorials": [
+        {
+            "name": "Tớ đã ăn hành với Redux như thế nào?",
+            "link" : "https://vhnam.github.io/tutorials/to-da-an-hanh-voi-redux-nhu-the-nao/",
+            "datetime": "2018-09-07",
+            "time": "Ngày 7 tháng 9 năm 2018",
+            "description": "Chia sẻ cách tiếp cận Redux cho người mới bắt đầu"
+        },
         {
             "name": "UI 101",
             "link" : "https://vhnam.github.io/tutorials/ui-101/",

diff --git a/src/scripts/tutorials.py b/src/scripts/tutorials.py
@@ -77,7 +77,7 @@ def main():
     # for directory in directories:
     #     build(directory, 'tutorials')
 
-    build("ui-101", 'tutorials')
+    build("to-da-an-hanh-voi-redux-nhu-the-nao", 'tutorials')
 
 
 

diff --git a/tutorials/to-da-an-hanh-voi-redux-nhu-the-nao/img/init.png b/tutorials/to-da-an-hanh-voi-redux-nhu-the-nao/img/init.png
diff --git a/tutorials/to-da-an-hanh-voi-redux-nhu-the-nao/img/redux-flow.png b/tutorials/to-da-an-hanh-voi-redux-nhu-the-nao/img/redux-flow.png
diff --git a/tutorials/to-da-an-hanh-voi-redux-nhu-the-nao/img/run.png b/tutorials/to-da-an-hanh-voi-redux-nhu-the-nao/img/run.png
diff --git a/tutorials/to-da-an-hanh-voi-redux-nhu-the-nao/img/step-1.png b/tutorials/to-da-an-hanh-voi-redux-nhu-the-nao/img/step-1.png
diff --git a/tutorials/to-da-an-hanh-voi-redux-nhu-the-nao/img/thumbnails.jpg b/tutorials/to-da-an-hanh-voi-redux-nhu-the-nao/img/thumbnails.jpg