Tạo App đơn giản hơn với Redux (Tiếp theo)

0 Comments

Bài viết lần trước mình đã giúp các bạn tìm hiểu về redux là gì và cách nó hoạt động, ở bài viết lần này, mình sẽ cùng các bạn tiếp tục hoàn thành app Tech_Stack và hiểu rõ hơn xem react làm thế nào để có thể sử dụng state trong redux.
Bước tiếp theo, trong components, tạo LibraryList.js:

Cũng trong thư mục đó, tạo ListItem.js:

React sử dụng các state trong redux qua hàm mapStateToProps, vai trò của nó đã được thể hiện qua tên hàm, tham số của hàm là state object lưu trữ các state của ứng dụng trong store, mapStateToProps có vai trò chuyển state của ứng dụng thành props sử dụng trong component.

FlatList là một tag trong React Native dùng để hiển thị một danh sách các item, với mỗi item là một component ListItem. Bước tiếp theo mình sẽ hướng dẫn các bạn actions làm cách nào để giao tiếp được với reducers và cách xác định item đang được chọn bằng react và redux. Trong src, tạo folder actions, trong actions, tạo type.js:

tạo tiếp index.js trong folder actions:

Trong reducers tạo SelectionReducer.js:

Actions và reducers giao tiếp với nhau qua type tương ứng, và dữ liệu actions trả về được reducers lấy qua tham số action. Qua đó, ta lấy được id của library đã chọn và compare vs list library để hiển thị description của library. Tiếp theo, thay đổi nội dung trong ListItem.js:


mapDispatchToProps giúp component sử dụng những hàm trong actions như là một props được truyền đến.

Khi click vào một item, thì description của item đó sẽ hiện ngay dưới title, có được là do khi click vào item, sẽ thay đổi state trong redux, sau đó react lấy được giá trị và render lên component.

LayoutAnimation.spring giúp tạo animation cho mỗi lần click vào item, đừng quên import bằng lệnh:
import {LayoutAnimation} from ‘react-native’;
Vậy là mình đã cùng các bạn hoàn thành app react đơn giản hơn với redux, mong là qua project này các bạn sẽ có thêm nhiều kiến thức về redux để vận dụng cho các app tiếp theo của mình, nếu các bạn có bất cứ thắc mắc gì về project, comment ở dưới bài viết để góp ys kiến thêm cho mình nhé.

Categories:

Leave a Reply

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