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ỉ [...]

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?"] [ [...]

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 [...]

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ề [...]

Bài viết được sự cho phép của tác giả Lưu Bình An Cùng thảo luận xung quanh vấn đề ứng dụng thiên về dữ liệu lớn, rất lớn Đây là những chỉ dẫn của AppNexus để tối ưu redux với lượng dữ liệu khủng. Mức độ bài viết khá chuyên sâu, bạn cần nắm thật vững redux, hoặc xem lại redux để hiểu rõ và nhớ lâu nội dung bài này. [irp posts="20204" name="Redux vận hành như thế nào"] [irp posts="18162" name="Tớ đã ăn hành với Redux như thế nào?"] Lưu dữ liệu với chỉ mục. Truy cập bằng selector Cách cấu trúc dữ liệu sẽ ảnh hưởng nhiều đến performance và việc tổ chức ứng dụng. Lưu dữ liệu trả về từ API theo chỉ mục (index) mang lại nhiều lợi ích. Nói nôm na, lưu theo chỉ mục tức là theo dạng object, theo cặp key-value. Tác giả Redux ( Dan Abramov ) có trình bài vấn đề này ở đây Tưởng tượng chúng ta có một mảng object, đượ [...]

Actions, reducers, action creators, middleware, pure functions, immutability,... những ngoại ngữ làm rối bất kỳ ai nếu chưa biết redux Nếu chưa biết tại sao lại sinh ra thằng Redux này, có thể xem ở tuts trước của mình. Chỉ sử dụng State của React Component sẽ build import React from 'react'; class Counter extends React.Component { state = { count: 0 } increment = () => { this.setState({ count: this.state.count + 1 }); } decrement = () => { this.setState({ count: this.state.count - 1 }); } render() { return ( <div> <h2>Counter</h2> <div> <button onClick={this.decrement}>-</button> <span>{this.state.count}</span> <button onClick={this.increment}>+</button> </div> </div> ) } } export default Counter;   Giải thích ngắn gọn cho dễ theo dõi Giá trị count được lưu trong state của component Counter Khi user click '+', hàm increment sẽ tăng giá trị count lên Khi state bị thay đổi, React sẽ render lại Counter và những component bên trong của nó, giá trị mới sẽ hiển thị Thêm Redux Như đã đề cập trong tuts trước, Redux lưu state lại trong 1 cái store, tranh lẫn lộn, store là nơi lưu state, [...]

Giới thiệu Nói chung Redux khá là phổ biến. Tuy nhiên, không phải tất cả chúng ta đều biết nó là gì và cách sử dụng nó ra sao. Trong bài này, chúng ta sẽ xem vài lý do tại sao nên sử dụng redux bằng cách phân tích những lợi ích mà nó mang lại và cách hoạt động của nó. Redux là gì? Redux là một predictable state management tool cho các ứng dụng Javascript. Nó giúp bạn viết các ứng dụng hoạt động một cách nhất quán, chạy trong các môi trường khác nhau (client, server, and native) và dễ dàng để test. 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 dùng kết hợp với React. Lý do ra đời Redux Do yêu cầu cho các ứng dụng single-page sử dụng Javascript ngày càng trở lên phức tạp thì code của chúng ta phải quản lý nhiều state hơn. State có thể bao gồ [...]

Giữa những thay đổi chóng mặt của công nghệ, SPA (Single Page Application) vẫn luôn là một trong nhưng mối quan tâm hàng đầu của những nhà phát triển, đặc biệt là trong giới lập trình web, bên cạnh đòi hỏi về tính tiện dụng, khả năng tương thích, mở rộng cũng như hiệu suất đối với các frameworks, libs sử dụng để xây dựng SPA cũng ngày một khó khăn. Được phát triển bởi Facebook, React như một làn gió mới giữa những frameworks, libs với cách tiếp cận có phần hơi cũ kỹ (như Angular). Kết hợp với Redux, một state management lib rất phổ biến, React/Redux trở thành một bộ "framework" kinh điển của dân SPA những năm gần đầy. Tuy nhiên, sử dụng bộ bí kiếp này không phải lúc nào cũng dễ dàng. Với hơn 6 năm làm việc trong lĩnh vực phát triển phần mềm, kinh qua không ít những dự á [...]

Sau vài lần trải nghiệm sử dụng app tệ hại mặc dù trước đó nó đã pass được vài bài test do chính mình đặt ra. Tôi quyết định tìm hiểu về integration test React, kèm theo đó là cả Redux và React Router. Thật đáng kinh ngạc khi hầu như không hề có một nguồn nào tốt cả. Đa phần họ đều sử dụng integration test một cách khập khễnh hoặc là sai hoàn toàn luôn. Nói cách khác bạn sẽ phải tự tạo ra một integration test để initializes một React component, thay đổi simulated user interaction và assert để component phát triển theo đúng hướng ta muốn. Setting up Với project này, chúng ta sẽ cần có React, Redux, React/Redux Router (không bắt buộc) và Thunk (không bắt buộc) để chạy app, Jest và Enzyme cho testing. Tôi sẽ không nói thêm về phần cái đặt những phần mềm trên vì nó có đầy trên mạng rồi. Để setup cơ bản cho integration test, tôi sẽ dùng vài tiểu xảo và tạo ra một [...]