Tích hợp Redux và React trong ứng dụng ToDo

Feature Image

Giới thiệu

Đây là một phần mở rộng từ bài hướng dẫn về cách xây dựng một thư viện tương tự Redux. Tham khảo link bài viết cũ tại đây: Medium. Trong bài viết này, chúng ta sẽ tích hợp thư viện Redux trong ứng dụng ToDo đồng thời giới thiệu một số tính năng nâng cao mà thư viên Redux đem lại.

Source code cuối cùng của ứng dụng có thể tham khảo tại đây: Github (chú ý checkout trên branch redux)

Source code bài viết trên branch redux

Tích hợp Redux

Trong trường hợp xây dựng một ứng dụng mới, bước đầu tiên cần làm là phân tích và xây dựng data shape, các action (và action creator), reducer tương ứng. Tuy nhiên, với ứng dụng ToDo, chúng ta đã thực hiện các bước này ở bài viết trước. Thông tin bên dưới đây tập trung chủ yếu vào việc tích hợp thư viện Redux.

Bước 1 — cài đặt thư viện

Việc cài đặt redux rất đơn giản. Trong terminal, chuyển đến thư mục ứng dụng (nơi chứa file package.json), thực hiện lệnh sau để cài đặt các thư viện liên quan đến Redux:

npm install redux react-redux — save

Bước 2 — tích hợp Redux store vào một container component

Trong trường hợp này, chúng ta tích hợp container App với Redux store. Lý do vì container App chứa hai component là TodoForm và TodoList, do đó nó có thể chia sẻ state của store đến các component con, cũng như giúp component con thực hiện hàm dispatch các action đến store.

Việc tích hợp được áp dụng trong file index.js, nơi container App được sử dụng:

Có một số điểm chú ý trong source code index.js:

• Việc tích hợp sử dụng createStore và Provider từ các thư viện tương ứng redux và react-redux
• Đúng với tên gọi, function createStore sẽ tạo ra một Redux store, cùng các tham số đầu vào là hàm reducer — todoReducer, và giá trị khởi tạo — trả về từ việc gọi function createInitialState
• Provider, là một Higher order component — HOC. Khi các component con, được bao bọc (wrapped) bởi Provider, chúng có thể sử dụng hàm connect để truy cập vào biến store của Redux. Cũng vì lý do này, Provider thường được đặt ở vị trí top-level trong ứng dụng (container App).

Bước 3 — Sử dụng hàm connect trong container component

Do container App được đặt bên trong component Provider ở file index.js, trong file App.js, chúng ta có thể sử dụng hàm connect để liên kết với store của Redux. Ví dụ:

export default connect(mapStateToProps, mapDispatchToProps)(App)

Có hai chú ý về tham số trong hàm connect:

• mapStateToProps: function có chức năng ánh xạ (mapping) từ một state của Redux store vào thuộc tính của container App
• mapDispatchToProps: function có chức năng ánh xạ việc dispatch một action vào thuộc tính của container App. Về bản chất, function này chia sẻ phương thức dispatch của store cho container App, nhờ đó chúng ta có thể gửi các action đến Redux store.

Source code của container App được rút gọn lại sau khi kết hợp với Redux:

Bằng việc gọi function connect, container App có thêm hai thuộc tính mới: tasks và addTodo. Giá trị của tasks là danh sách các Todo item được trả về từ state của store. Thuộc tính addTodo là một function, mà khi gọi sẽ dispatch action ADD_TODO đến Redux store.

• Với thuộc tính tasks, container App gửi xuống component TodoList để hiển thị danh sách các Todo item. Mỗi khi thuộc tính này được update (khi state trong store) thay đổi, container App và TodoList sẽ re-render và update lại danh sách hiển thị.
• Với thuộc tính addTodo, container App gửi xuống cho component TodoForm dưới dạng một callback. TodoForm sẽ thực hiện lời gọi callback này mỗi khi người dùng click vào submit button. Đoạn code dưới đây của TodoForm.js minh hoạ cho điều này (Line 10)

Bài tập

Một ứng dụng Redux thường sử dụng helper function — combineReducers. Helper này kết hợp nhiều reducers khi mỗi reducer quản lý một thành phần bên trong state của ứng dụng. Hãy tìm cách áp dụng hàm helper combinerReducers trong ứng dụng Todo.

Lưu ý: hàm combineReducers vẫn áp dụng được với một reducer function. Tuy vậy, việc áp dụng trong trường hợp này không đem lại cải tiến đáng kể. Yêu cầu bài tập này chỉ mang tính thực hành.

Kết luận

Redux là một thư viện phổ biến trong các ứng dụng JavaScript (đặc biệt là React). Thư viện này giúp cho việc quản lý state ứng dụng trở nên hiệu quả và dễ dàng hơn. Bên cạnh React, chúng ta cũng còn rất nhiều cách giải pháp khác không kém phần thú vị, ví dụ: Apollo Link State, MobX, React Context API (React v16.3.0+). Bài viết này chỉ mới mô tả một phần cơ bản của Redux qua ứng dụng Todo list, các bạn có thể tìm thấy rất nhiều thông tin trên trang chủ của Redux tại đây: redux.js.org, cũng như các ví dụ hoàn chỉnh hơn, tại đây: Redux/examples

Chúc các bạn một ngày cuối tuần vui vẻ. Happy coding ~ Andy.