Tìm kiếm

ReactJS
Tất cả
Việc làm
Công ty

Tạo thông báo việc làm ngay

1 việc làmRedux

Thông tin công ty

Bài viết liên quan

Xem tất cả
Redux Toolkit: Tìm hiểu createSlice

Redux Toolkit: Tìm hiểu createSlice

Bài viết được sự cho phép của tác giả Phạm Minh Khoa Tiếp theo bài trước, mình sẽ giới thiệu chi tiết hơn các API cơ bản của Redux-Toolkit để chúng ta có thể tạo được 1 flow hoàn chỉnh của Redux. Redux Module Trong Redux, 1 module hoàn chỉnh bao gồm: Store, Actions và Reducer, thông thường các bạn sẽ chia viết từng phần trong các file riêng và cấu trúc folder sẽ dạng như dưới đây: Với Redux Toolkit (RTK) thì tối giản hơn, tạo 1 module hoàn chỉnh bằng API createSlice. [irp posts="51510" name="React Redux: Redux middleware là gì?"] [irp posts="20204" name="Redux vận hành như thế nào"] https://redux-toolkit.js.org/api/createSlice import { createSlice } from '@reduxjs/toolkit'; const counterSlice = createSlice({ name: 'counter', initialState: { count: 0 }, reducers: { increment: state => state.count += 1, decrement: state => state.count -= 1 } }) export const { increment, decrement } = counterSlice.actions export default counterSlice.reducer Một số ưu điểm của cách viết này: Không còn tạo riêng các file action, reducer, type action types tự động sinh ra kèm tiền tố mặc định là trường name Cú pháp hoàn chỉ [...]

Đọc thêm
React Redux: Giới thiệu Redux Thunk

React Redux: Giới thiệu Redux Thunk

Bài viết được sự cho phép của tác giả Phạm Minh Khoa Ở bài viết trước chúng ta đã biết được Redux middleware là gì, và vấn đề gặp phải với lỗi: “Error: Actions must be plain objects. Use custom middleware for async actions” khi chúng ta cần xử lý các action bất đồng bộ như lấy dữ liệu từ API. Trước hết phải thống nhất với nhau vị trí bạn nên xử lý các hành động bất đồng bộ (Asynchronous actions) trong Redux. Nếu như bên React chúng ta có thể gọi chúng trong useEffect (hoặc componentDidMount với class component) thì với Redux chúng ta nên đặt trong action creator. Tại sao? Cùng nhìn lại Redux Cycle nhé: Rõ ràng không thể viết các xử lý bất đồng bộ vào trong action được vì nó là 1 plain object; cũng không nên viết vào Reducers vì reducers theo như kiến trúc redux thì chỉ là những functions nhận giá trị đầu vào là state hiện tại và 1 action để trả về 1 state mới: (state, action) => newState. [irp posts="3349" name="Cách test ứng dụng react redux?"] [ [...]

Đọc thêm
React Redux: Redux middleware là gì?

React Redux: Redux middleware là gì?

Bài viết được sự cho phép của tác giả Phạm Minh Khoa Để hiểu rõ hơn khái niệm Redux middleware, chúng ta cùng thử xử lý 1 bài toán như sau: Bạn cần phải ngăn chặn người dùng (users) không được sử dụng các từ khóa bị cấm (ví dụ như vl, vkl, cmnr, …) trong bài viết của họ. Để đơn giản thì mình sẽ xử lý lúc người dùng submit bài viết (trong ví dụ sẽ chỉ check trong tiêu đề bài viết thôi nhé) handleSubmit(event) { event.preventDefault(); const { title } = this.state; this.props.addArticle({ title }); this.setState({ title: "" }); } Việc kiểm tra tất nhiên sẽ được đặt trước dòng this.props.addArticle và nó sẽ kiểu như này: handleSubmit(event) { event.preventDefault(); const { title } = this.state; const forbiddenWords = ['spam', 'money']; const foundWord = forbiddenWords.filter(word => title.includes(word) ) if (foundWord) { return this.props.titleForbidden(); } this.props.addArticle({ title }); this.setState({ title: "" }); } Việc làm như này tất nhiên cũng chẳng sao, tuy nhiên trong đoạn code trên chứa phần xử lý logic (business logic) và nó nằm trong UI Component; thế là không đạt được mục đích của [...]

Đọc thêm
Redux selector và vấn đề sử dụng sao cho hiệu quả

Redux selector và vấn đề sử dụng sao cho hiệu quả

Bài viết được sự cho phép của tác giả Lưu Bình An Selector Selector là một hàm với input là 'state' của store và trả về một giá trị mong muốn const selectEntities = state => state.entities; function selectItemIds(state) { return state.items.map(item => item.id); } const selectSomeSpecificField = state => state.some.deeply.nested.field; function selectItemsWhoseNamesStartWith(items, namePrefix) { const filteredItems = items.filter(item => item.name.startsWith(namePrefix)); return filteredItems; } Về cách đặt tên, không bắt buộc, nhưng đa phần sẽ đặt với prefix select hoặc get Tuyển react lương cao đi làm gấp Khác nhau giữa useSelector và mapState Khi một action được dispatch, useSelector sẽ thực hiện so sánh giữa kết quả trước đó và kết quả hiện tại, nếu khác, component bị force để re-render. useSelector sử dụng so sánh === chứ không dùng phương pháp so sánh shallow (dịch vui là so sánh "nhẹ") [irp posts="21981" name="Làm việc với Redux trong ứng dụng lớn"] [irp posts="11181" name="Redux là gì? Hiểu rõ cơ bản cách dùng Redux"] Lý do sử dụng selector Sử dụng lại, một selector có thể sử dụng ở nhiề [...]

Đọc thêm