Nếu bạn vẫn chưa biết Redux là gì, trong bài viết này chúng tôi sẽ tập trung vào việc giải thích mọi thứ bạn nên biết về thư viện này JavaScript, cũng như công dụng của nó, cách sử dụng nó, v.v. Bằng cách này, bạn sẽ có tất cả các công cụ cần thiết để có thể tích hợp nó vào các dự án JS tiếp theo của mình.
Hãy cùng xem Redux là như thế nào nhé!
JavaScript là gì?
JavaScript (JS), là một ngôn ngữ lập trình thông dịch. Nó được coi là một phương ngữ của tiêu chuẩn ECMAScript và được đặc trưng bởi tính hướng đối tượng, dựa trên nguyên mẫu, mệnh lệnh, gõ yếu và động. Mặc dù có tên như vậy nhưng không nên nhầm lẫn nó với Java. Việc tạo ra nó dựa trên những cân nhắc về mặt thương mại, sau khi Netscape Navigator (người tạo ra LiveScript) mua lại Sun Microsystems (người tạo ra Java) và việc thay đổi tên của ngôn ngữ lập trình.
Chủ yếu được sử dụng ở phía khách hàng, tạo thành một phần không thể thiếu của trình duyệt web. Điều này cho phép bạn cải thiện giao diện người dùng và tạo các trang web động. Ngoài ra, JavaScript có thể được sử dụng ở phía máy chủ, được gọi là JavaScript phía máy chủ hoặc SSJS. Khả năng ứng dụng của nó vượt ra ngoài web, được sử dụng trong các tài liệu PDF và ứng dụng máy tính để bàn, chủ yếu là các widget, v.v.
La Cú pháp JavaScript giống với các ngôn ngữ như C++ và Java, mặc dù nó sử dụng tên và quy ước từ Java, do đó có tên như vậy. Tuy nhiên, như tôi đã đề cập trước đó, điều quan trọng cần lưu ý là, mặc dù có tên giống nhau nhưng Java và JavaScript có ngữ nghĩa và mục đích khác nhau.
Mặt khác, chúng ta phải nhớ rằng JavaScript sử dụng cách triển khai Mô hình đối tượng tài liệu (DOM) và điều đó JS là ngôn ngữ lập trình duy nhất mà trình duyệt hiểu được một cách tự nhiên. Ban đầu, nó được sử dụng trong các trang web HTML để thực hiện các thao tác trên máy khách mà không cần truy cập vào máy chủ. Tuy nhiên, ngày nay nó được sử dụng rộng rãi để gửi và nhận thông tin từ máy chủ, thường kết hợp với các công nghệ như AJAX. JavaScript được diễn giải trong tác nhân người dùng trong khi các câu lệnh được tải xuống cùng với mã HTML.
Ứng dụng JS
JavaScript là ngôn ngữ lập trình được sử dụng rộng rãi trong nhiều ứng dụng và ngữ cảnh khác nhau, chẳng hạn như:
- Phát triển web: Nó là điều cần thiết trong phát triển web. Nó được sử dụng để cải thiện tính tương tác và trải nghiệm người dùng trên các trang web và ứng dụng web. Nó được sử dụng trong việc tạo ra các biểu mẫu tương tác, hiệu ứng hình ảnh, xác thực dữ liệu theo thời gian thực và điều hướng động, cùng nhiều thứ khác. Trình bày trong:
- Giao diện người dùng web: Nó là nền tảng của sự phát triển front-end. Các khung và thư viện như React, Angular và Vue.js dựa vào JavaScript để tạo giao diện người dùng tương tác và năng động trong các ứng dụng web.
- Phần phụ trợ web: Thông qua các nền tảng như Node.js, JavaScript được sử dụng ở phía máy chủ để xây dựng các ứng dụng web hoàn chỉnh. Điều này cho phép nhà phát triển sử dụng JavaScript trên cả mặt trước và mặt sau của ứng dụng, giúp dễ dàng đồng bộ hóa dữ liệu và xây dựng ứng dụng trong thời gian thực.
- Ứng dụng máy chủ: Mặc dù không phổ biến như các ngôn ngữ phía máy chủ khác, nhưng JavaScript được sử dụng trong phát triển ứng dụng máy chủ thông qua Node.js. Điều này đặc biệt hữu ích cho các ứng dụng thời gian thực và ứng dụng xử lý số lượng lớn yêu cầu đồng thời.
- Ứng dụng di động: Nó được sử dụng để phát triển các ứng dụng di động lai sử dụng các framework như React Native và Ionic. Các khung này cho phép các nhà phát triển viết một lần và chạy ứng dụng trên nhiều nền tảng, chẳng hạn như iOS và Android.
- Trò chơi trực tuyến: Nó được sử dụng trong việc phát triển trò chơi trực tuyến và trò chơi trình duyệt. Các thư viện như Phaser và Three.js giúp dễ dàng tạo trò chơi 2D và 3D tương tác trong trình duyệt.
- Ứng dụng máy tính để bàn: Thông qua các công cụ như Electron, có thể xây dựng các ứng dụng máy tính để bàn đa nền tảng bằng cách sử dụng các công nghệ web như HTML, CSS và JavaScript.
- Tiện ích mở rộng trình duyệt: Để thêm chức năng bổ sung cho trình duyệt web, các tiện ích mở rộng được sử dụng. Các tiện ích mở rộng này thường được viết bằng JavaScript.
- Ứng dụng Internet vạn vật (IoT): Nó được sử dụng trong việc phát triển ứng dụng và hệ thống cho thiết bị IoT nhờ khả năng giao tiếp với phần cứng và cảm biến thông qua API và thư viện chuyên dụng.
Redux là gì và nó hoạt động như thế nào?
Redux là một thư viện JavaScript mã nguồn mở được sử dụng để quản lý trạng thái trong các ứng dụng và chịu ảnh hưởng của ngôn ngữ chức năng Elm. Nó thường được kết hợp với các thư viện khác như React hoặc Angular để xây dựng giao diện người dùng. Nó được hình thành bởi Dan Abramov và Andrew Clark, những người lấy cảm hứng từ thư viện Facebook có tên Flux.
Nói chung, Redux là một thư viện nhỏ có API đơn giản và hạn chế, được thiết kế để hoạt động như một vùng chứa có thể dự đoán được cho trạng thái ứng dụng. Hoạt động của nó tương tự như khái niệm "giảm" trong lập trình chức năng.
Lịch sử của Redux bắt nguồn từ 2015, khi Dan Abramov bắt đầu phát triển phiên bản đầu tiên của Redux trong khi chuẩn bị phát biểu tại hội nghị React Europe về Hot Reloading. Trong quá trình này, Abramov nhận thấy sự giống nhau giữa mẫu Flux và chức năng giảm tốc. Quan sát này khiến anh tự hỏi liệu cửa hàng Flux có thực sự là một chức năng giảm tốc hay không.
Để thực hiện ý tưởng này, Abramov đã liên hệ với Andrew Clark, tác giả của triển khai Flux có tên Flummox. Họ cùng nhau hợp tác để đưa Redux vào cuộc sống và xác định một API mạch lạc. Ngoài ra, họ còn triển khai khả năng tiện ích mở rộng sử dụng phần mềm trung gian và công cụ cải tiến cửa hàng, đã đóng góp đáng kể cho hệ sinh thái Redux hiện tại, mở rộng hơn nữa khả năng của nó.
Mối quan hệ Redux và React: React là gì
React là một thư viện JavaScript tập trung vào việc tạo giao diện người dùng, mặc dù tính linh hoạt của nó vượt xa định nghĩa đó. Công cụ này ban đầu được Facebook phát triển, là mã nguồn mở và được sử dụng rộng rãi nhờ khả năng tạo nhanh giao diện người dùng trong nhiều ứng dụng, bao gồm ứng dụng web một trang (SPA), ứng dụng Android và iOS.
Không giống như các framework khác, chẳng hạn như Angular, cung cấp các cách tiếp cận phức tạp hơn, React nổi bật nhờ khả năng tạo giao diện người dùng một cách hiệu quả. Điều này đạt được thông qua việc sử dụng các tệp .jsx, kết hợp logic và giao diện người dùng trong một tệp duy nhất và được tổ chức thành các đơn vị gọi là thành phần.
DOM ảo: nó là gì?
Khi đi sâu vào thế giới ReactJS, có lẽ chúng ta thường xuyên nghe về khái niệm ReactJS. DOM ảo. Ý tưởng này bắt nguồn từ một ý tưởng khéo léo: thay vì cập nhật toàn bộ DOM thực tế, chúng tôi chỉ sửa đổi phần thực sự cần thay đổi. Trong các ứng dụng JavaScript cũ, chúng tôi thường nhận dữ liệu ở định dạng JSON từ máy chủ rồi tạo một HTML mới hoàn chỉnh để hiển thị, dẫn đến việc làm mới toàn bộ trang sau mỗi lần sửa đổi.
Cách cài đặt và định cấu hình Redux trong dự án của bạn
Nếu bạn muốn biết cách cài đặt ReduxSự thật là nó không hề phức tạp chút nào. Để làm điều này, bạn phải đi đến thiết bị đầu cuối và từ đó bạn phải thực hiện lệnh sau:
npm i -S redux
Bây giờ bạn đã cài đặt phiên bản Redux ổn định trên hệ thống của mình. Tất nhiên, có thể bạn sẽ cần giải quyết một số phần phụ thuộc, chẳng hạn như cài đặt npm, trình quản lý gói Node.js. Sau khi hoàn tất, chúng ta sẽ cài đặt React, bạn cũng sẽ cần tận dụng Redux, cũng như các công cụ phát triển để có thể bắt đầu tạo dự án của mình.
Để cài đặt các gói khác này, các lệnh bạn phải thực hiện là:
npm i -S Reac-redux npm i -D redux-devtools
Bây giờ bạn sẽ có mọi thứ sẵn sàng để bắt đầu. Nếu vào thư mục chính hoặc thư mục đã cài đặt Redux, bạn sẽ thấy có một số thư mục con hoặc thư mục con như STORE, REDUCERS, ACTIONS, TYPES. Bạn phải biết mỗi cái là gì:
- HÀNH ĐỘNG: Đây là những đối tượng phải có hai thuộc tính, một thuộc tính mô tả loại (TYPE) của hành động và một thuộc tính khác mô tả những gì cần thay đổi trong trạng thái của ứng dụng.
- GIẢM GIÁ- Bộ giảm tốc là các chức năng thực hiện hành vi của các hành động. Chúng thay đổi trạng thái của ứng dụng, tùy thuộc vào mô tả hành động và mô tả thay đổi trạng thái.
- LƯU: là nơi gặp nhau của các hành động và bộ giảm tốc, duy trì và thay đổi trạng thái của ứng dụng. Chỉ có một.
- LOẠI: như tôi đã nói trước đây, đó là loại hành động.
Ví dụ thực tế: Tạo một ứng dụng với Redux
Un ví dụ sử dụng Redux Nó có thể như sau, trong đó một ứng dụng kế toán đơn giản được tạo bằng Redux. Nhưng để làm được điều này, trước tiên bạn phải định cấu hình Redux cũng như xác định các hành động và bộ giảm tốc của mình:
// Nhập thư viện Redux import { createStore } from 'redux'; // Xác định các hành động const tăngAction = { type: 'INCREMENT' }; const decrementAction = { type: 'DECREMENT' }; // Xác định bộ giảm tốc const counterReducer = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + 1; trường hợp 'GIẢM GIÁ': trạng thái trả về - 1; mặc định: trạng thái trả về; } }; // Tạo cửa hàng Redux const store = createStore(counterReducer); // Đăng ký những thay đổi trong cửa hàng store.subscribe(() => { console.log('Current counter state:', store.getState()); }); // Gửi các hành động để sửa đổi trạng thái store.dispatch(incrementAction); store.dispatch(incrementAction); store.dispatch(decrementAction);
Đây là một ví dụ rất đơn giản về cách sử dụng Redux. Trong một ứng dụng lớn hơn, bạn sẽ xác định các hành động và bộ giảm tốc phức tạp hơn, đồng thời kết nối các thành phần React để truy cập và cập nhật trạng thái của cửa hàng. Nhưng ít nhất điều này cho bạn ý tưởng về cách nó hoạt động...