Tạo App đơn giản hơn với Redux

0 Comments

1. Tại sao Redux ra đời?

Do yêu cầu cho các ứng dụng sử dụng JavaScript ngày càng trở nên phức tạp hơn thì trong phần code của chúng ta cần quản lý rất nhiều state bao gồm dữ liệu từ phía server trả về client hoặc từ client đẩy lên server và trong cả phần UI (giao diện). Điều này làm cho việc quản lý và thay đổi state trở nên rất khó khăn, đôi khi chúng ta sẽ gặp vấn đề ví dụ như optimistic updates (được hiểu như là như là UI được render trước khi đc update từ server, làm cho việc hiển thị không được như mong muốn: render phía server, fetching dữ liệu từ database…) do đó việc quản lý những app lớn trở nên vô cùng phức tạp với các lập trình viên.
Tháng 5 năm 2015, Tháng 5/2015 Dan Abramov công bố một thư viện mới có tên Redux, nó là dựa trên kiến trúc của ELM và loại bỏ sự phức tạp của Flux, giúp cho app có thể quản lý state một cách dễ dàng hơn. Sau khi ra đời Redux đã gây ra một tiếng vang lớn, mặc dù Redux và flux đều tồn tại song song, nhưng Redux vẫn được sử dụng rộng rãi hơn cả.

2. Redux là gì ?

Redux là một thư viện javascript giúp tạo thành một lớp quản lý trạng thái ứng dụng. Redux ra đời lấy cảm hứng từ tư tưởng của ngôn ngữ Elm và kiến trúc Flux của Facebook. Do vậy Redux thường được sử dụng để kết hợp với React và sự kết hợp giữa 2 thư viện này khiến cho lập trình viên dễ dàng hơn rất nhiều khi tạo ra những app lớn.

3. Cách hoạt động của Redux


Chúng ta sẽ đi tìm hiểu từng khái niệm trong sơ đồ trên:
Store là một đối tượng chứa tất cả các state trong app. Reducer là một hàm trả về dữ liệu cho phía client hoặc đẩy dữ liệu lên phía server. Action là một đối tượng mà sẽ giao tiếp với reducer làm thế nào để thay đổi dữ liệu (bao gồm bắt sự kiện update dữ liệu khi render), action luôn yêu cầu một properties có tên là type để giao tiếp được với reducer. State là dữ liệu truyền cho app để sử dụng.
Ví dụ chuyển một chuỗi “abcd” thành một mảng [“a”, “b”, “c”, “d”], tạo một action có type là split, sau đó reducer sẽ xác định nếu type là split thì sẽ thực hiện chuyển chuỗi đã cho thành mảng, sau đó đẩy mảng đó vào trong đối tượng state.

3.Tạo App với redux

Chúng ta sẽ cùng tạo một App đơn giản với redux để các bạn có thể hiểu rõ hơn về thư viện này cũng như những ưu điểm của nó mà mình đã nói ở phần trên. Đầu tiên, khởi tạo project: react-native init tech_stack
Có 3 package cơ bản các bạn cần cài đặt để có thể sử dụng redux trong project:
react-redux redux và redux-thunk, và đừng quên tạo thêm file .eslintrc và cài đặt thêm eslint-config-rallycoding để eslint có thể giúp bạn sửa code và giúp code trình bày rõ ràng hơn.

Tiếp theo các bạn cần xóa file App.js và index.js
Tạo thêm folder src và trong src, tạo App.js. Tạo thêm file index.android.js và index.ios.js ở đường dẫn chính của project.
Tiếp theo, trong trong src, tạo folder components, trong components, tạo folder common, trong folder common này sẽ chứa các file Button.js Header.js index.js Spinner.js Input.js CardSection.js Card.js, nếu bạn nào đã theo dõi bài viết của mình từ các project trước, các bạn có thể copy paste cho nhanh =))
Button.js

Card.js

CardSection.js

Header.js

Input.js

Spinner.js

index.js

App.js:

Provider là một đối tượng giúp chuyển tất cả dữ liệu trong store thành những gì có thể sử dụng được trong React, nói cách dễ dàng hơn, Provider giúp store giao tiếp được với React. Redux hiểu được Provider do Provider được lấy từ model react-redux mà thư viện này giúp react giao tiếp redux.
Redux không hiểu được store của React, vậy nên cần phải tạo store bằng createStore được lấy từ model redux. CreateStore là một hàm có tác dụng nói cho trình duyệt khi mà redux tạo store để quản lý dữ liệu.
Import Header với props headerText để hiển thị header ở trang chủ.
index.ios.js và index.android.js có phần code giống nhau:

Tiếp theo trong folder src, tạo folder reducers, trong reducers tạo index.js, từ lúc bắt đầu đến lúc hoàn thiện app, chúng ta sẽ có nhiều reducers được import vào trong file này để store có được dữ liệu từ reducers:

combineReducers là hàm giúp cho store có thể lấy dữ liệu từ reducers, kết hợp những reducers được import vào file index.
Do tạm thời app chưa kết nối với database nên mình sẽ lấy tạm dữ liệu từ file json. Trong reducers, tạo LibraryList.json:

Sau đó import data và gán vào giá trị của biến có tên là LibraryReducer. Trong reducers, tạo file LibraryReducer.js:

Như vậy là props libraries với giá trị được gán bởi biến LibraryReducer đã được lưu vào trong store, muốn sử dụng giá trị của libraries, react sẽ kết nối với redux để lấy giá trị từ store, chi tiết mình sẽ hướng dẫn các bạn ở bài viết lần sau. Nếu các bạn có bất cứ thắc mắc gì thì comment ở bên dưới giúp mình nhé. Đừng quên quay lại blog của mình vào thứ 7 hàng tuần để cập nhật những bài viết mới nhất nhé

Categories:

Leave a Reply

Your email address will not be published. Required fields are marked *