Hiện nay, Redux được biết đến như l&agrave; một thư viện hỗ trợ quản l&yacute; trạng th&aacute;i của thư viện Reactjs. Sở dĩ n&oacute; được ứng dụng như vậy l&agrave; bởi trong qu&aacute; tr&igrave;nh l&agrave;m việc c&ugrave;ng Reactjs hoặc c&aacute;c thư viện Single Page n&oacute;i chung th&igrave; việc quản l&yacute; trạng th&aacute;i ứng dụng l&agrave; vấn đề kh&aacute; kh&oacute; khăn. Do đ&oacute;, Redux l&agrave; giải ph&aacute;p tốt nhất, gi&uacute;p bạn khắc phục t&igrave;nh trạng n&agrave;y. Vậy Redux l&agrave; g&igrave;, khi n&agrave;o n&ecirc;n sử dụng v&agrave; c&aacute;ch thức hoạt động của n&oacute; như thế n&agrave;o? <a title="Tek 4" href="https://tek4.vn/Tek4.vn%20">Tek4.vn</a> sẽ gi&uacute;p bạn giải đ&aacute;p c&aacute;c thắc mắc n&agrave;y qua b&agrave;i viết dưới đ&acirc;y.&nbsp;
<h2 style="text-align: justify;">Redux l&agrave; g&igrave;?</h2>
<a title="Redux l&agrave; g&igrave;" href="https://tek4.vn/redux-la-gi">Redux</a> l&agrave; một thư viện JavaScript, được x&acirc;y dựng tr&ecirc;n nền tảng tư tưởng của ng&ocirc;n ngữ Elm v&agrave; kiến tr&uacute;c Flux do Facebook giới thiệu. N&oacute; cũng tương tự như một v&ugrave;ng chứa trạng th&aacute;i, c&oacute; thể dự đo&aacute;n c&aacute;c thiết kế. Từ đ&oacute; gi&uacute;p lập tr&igrave;nh vi&ecirc;n viết c&aacute;c ứng dụng JavaScript hoạt động nhất qu&aacute;n chạy trong c&aacute;c m&ocirc;i trường kh&aacute;c nhau như client, server v&agrave; native.&nbsp;
Đ&acirc;y l&agrave; thư viện kết hợp ho&agrave;n hảo với Reactjs. Mặt kh&aacute;c, n&oacute; cũng c&oacute; thể được sử dụng với c&aacute;c khung giao diện kh&aacute;c như Angular, Angular 2, Deku hay Falcor. Người d&ugrave;ng kh&ocirc;ng cần lo lắng k&iacute;ch thước nội dung ứng dụng c&oacute; thể lớn hơn bởi Redux c&oacute; dung lượng ở mức nhẹ, chỉ khoảng 2KB. Nhờ c&oacute; thư viện n&agrave;y, trạng th&aacute;i của ứng dụng được lưu tại một thư viện, mỗi th&agrave;nh phần đều c&oacute; thể truy cập v&agrave;o trạng th&aacute;i bất kỳ m&agrave; n&oacute; cần.&nbsp;
&nbsp;
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" title="L&agrave; một thư viện JavaScript m&atilde; nguồn mở để quản l&yacute; v&agrave; tập trung trạng th&aacute;i ứng dụng, được sử dụng trong React hoặc Angular để x&acirc;y dựng giao diện người d&ugrave;ng." src="https://tek4.vn/public_files/17c4d56b-1cc3-4c25-8065-c7254c62aa8a" alt="redux l&agrave; g&igrave;" />
<h2 style="text-align: justify;">Khi n&agrave;o n&ecirc;n sử dụng Redux?</h2>
Kh&ocirc;ng l&acirc;u sau khi được ph&aacute;t h&agrave;nh v&agrave;o th&aacute;ng 05 năm 2015, Redux đ&atilde; nhanh ch&oacute;ng trở th&agrave;nh một trong những chủ đề s&ocirc;i nổi nhất trong giới frontend. Nhiều người tỏ ra ủng hộ Redux nhưng cũng c&oacute; kh&ocirc;ng &iacute;t người chỉ ra c&aacute;c vấn đề. N&oacute; gi&uacute;p bạn quản l&yacute; trạng th&aacute;i ứng dụng của m&igrave;nh ở một nơi duy nhất v&agrave; giữ c&aacute;c thay đổi n&agrave;y trở n&ecirc;n dễ theo d&otilde;i v&agrave; dự đo&aacute;n hơn. Nhờ đ&oacute;, Redux gi&uacute;p bạn dễ d&agrave;ng lập luận về những thay đổi xảy ra trong app của m&igrave;nh.&nbsp;
Tuy nhi&ecirc;n, để sử dụng những tiện &iacute;ch n&agrave;y, bạn phải chấp nhận r&agrave;ng buộc v&agrave; đ&aacute;nh đổi. Redux c&oacute; thể tăng th&ecirc;m m&atilde; viết sẵn, phức tạp ho&aacute; vấn đề v&agrave; phụ thuộc v&agrave;o nhiều quyết định cấu tr&uacute;c kh&aacute;c. Nhiều người thường thắc mắc vậy khi n&agrave;o n&ecirc;n sử dụng Redux. C&acirc;u trả lời đơn giản l&agrave; khi ứng dụng của bạn ph&aacute;t triển tới một quy m&ocirc; m&agrave; việc quản l&yacute; c&aacute;c trạng th&aacute;i của n&oacute; trở n&ecirc;n phức tạp hơn. L&uacute;c n&agrave;y bạn sẽ cần tới Redux để giải quyết vấn đề quản l&yacute; trạng th&aacute;i tốt hơn.&nbsp;
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" title="C&aacute;ch thức sử dụng redux" src="https://tek4.vn/public_files/5d86319e-e2d9-4636-b3b1-7512828563fe" alt="Sử dụng redux" />
<h2 style="text-align: justify;">C&aacute;ch hoạt động của Redux</h2>
C&aacute;ch thức hoạt động của Redux đơn giản với một thư viện trung t&acirc;m lưu trữ to&agrave;n bộ trạng th&aacute;i của ứng dụng. C&aacute;c th&agrave;nh phần của Redux c&oacute; thể truy cập v&agrave;o thư viện trung t&acirc;m v&agrave; lấy trạng th&aacute;i đ&oacute; khi cần thiết m&agrave; kh&ocirc;ng cần phải gửi đạo cụ từ th&agrave;nh phần n&agrave;y sang th&agrave;nh phần kh&aacute;c. Dưới đ&acirc;y l&agrave; 3 phần x&acirc;y dựng m&agrave; bạn cần nắm được để hiểu về c&aacute;ch thức hoạt động cụ thể của n&oacute;.&nbsp;
<ol style="text-align: justify;">
<li>
<h3> Actions</h3>
</li>
</ol>
Actions l&agrave; c&aacute;c sự kiện để bạn gửi dữ liệu từ ứng dụng tới thư viện Redux. C&aacute;c dữ liệu n&agrave;y c&oacute; thể l&agrave; từ tương t&aacute;c của người d&ugrave;ng, lệnh gọi API hay từ c&aacute;c biểu mẫu. C&aacute;c Actions thuộc kiểu đối tượng JavaScript thuần t&uacute;y v&agrave; phải c&oacute; thuộc t&iacute;nh để chỉ ra loại h&agrave;nh động sẽ được thực hiện. N&oacute; cũng cần c&oacute; một trọng tải chứa c&aacute;c th&ocirc;ng tin cần được thực hiện. C&aacute;c Actions được tạo ra bằng tr&igrave;nh tạo h&agrave;nh động store.dispatch().&nbsp;
Bạn c&oacute; thể tham khảo qu&aacute; tr&igrave;nh thực hiện một Actions khi đăng nhập v&agrave;o ứng dụng dưới đ&acirc;y:&nbsp;
<code>{&nbsp;</code>
<code>type : &ldquo;LOGIN&rdquo; ,&nbsp;</code>
<code>payload : {&nbsp;</code>
<code>username : &ldquo;foo&rdquo; ,&nbsp;</code>
<code>password : &ldquo;bar&rdquo;&nbsp;</code>
<code>}&nbsp;</code>
<code>}&nbsp;</code>
V&iacute; dụ về tr&igrave;nh tạo Actions:&nbsp;
<code>const setLoginStatus = ( name,&nbsp;</code>
<code>password ) =&gt; {&nbsp;</code>
<code>return {&nbsp;</code>
<code>type : &ldquo;LOGIN&rdquo;&nbsp; ,&nbsp;</code>
<code>payload : {&nbsp;</code>
<code>username : &ldquo;foo&rdquo; ,</code>
<code>password : &ldquo;bar&rdquo; }&nbsp;</code>
<code>}&nbsp;</code>
<code>}&nbsp;</code>
<ol style="text-align: justify;" start="2">
<li>
<h3> Reducers</h3>
</li>
</ol>
Reducers lấy trạng th&aacute;i hiện tại của ứng dụng, thực hiện một thao t&aacute;c rồi trả về trạng th&aacute;i mới v&agrave; l&agrave; c&aacute;c h&agrave;m thuần tu&yacute;. Những trạng th&aacute;i n&agrave;y được lưu trữ ở dạng c&aacute;c đối tượng v&agrave; chỉ định c&aacute;ch trạng th&aacute;i ứng dụng thay đổi. Từ đ&oacute; đ&aacute;p ứng được y&ecirc;u cầu của một h&agrave;nh động kh&aacute;c được gửi tới thư viện.&nbsp;
Trong đ&oacute; c&oacute; một gi&aacute; trị được t&iacute;nh to&aacute;n từ nhiều gi&aacute; trị sau khi đ&atilde; thực hiện được một h&agrave;m gọi lại. C&aacute;c h&agrave;m Reducer trong Redux l&agrave; h&agrave;m thuần tu&yacute;, kh&ocirc;ng l&agrave;m thay đổi dữ liệu trong đối tượng được chuyển cho ch&uacute;ng. B&ecirc;n cạnh đ&oacute;, n&oacute; cũng kh&ocirc;ng thực hiện bất cứ t&aacute;c dụng phụ n&agrave;o trong ứng dụng m&agrave; lu&ocirc;n tạo ra c&ugrave;ng 1 kết quả với c&ugrave;ng 1 đối tượng.&nbsp;
Một v&iacute; dụ đơn giản về c&aacute;ch thức hoạt động của Reducers trong Redux:&nbsp;
<code>const LoginComponent = ( state = initialState , action ) =&gt; { switch ( action . type ) {&nbsp;</code>
<code>// Bộ Reducers n&agrave;y xử l&yacute; bất cứ h&agrave;nh động n&agrave;o với kiểu &ldquo;LOGIN&rdquo;. Trường hợp &ldquo;LOGIN&rdquo; : trả về trạng th&aacute;i . map ( user =&gt; { if (user . username ! == action . username ) { return user ; }&nbsp;</code>
<code>if ( user . password == action . password ) { return { &hellip; user , login_status : &ldquo;LOGGED IN&rdquo; } } } ); default&nbsp; : trả về trạng th&aacute;i ; } } ;&nbsp;</code>
<ol style="text-align: justify;" start="3">
<li>
<h3> Store</h3>
</li>
</ol>
Store l&agrave; thư viện lưu trữ trạng th&aacute;i ứng dụng v&agrave; thường chỉ n&ecirc;n duy tr&igrave; một thư viện duy nhất trong Redux. Bạn c&oacute; thể truy cập v&agrave;o trạng th&aacute;i được lưu trữ, cập nhật, đăng k&yacute; hoặc hủy đăng k&yacute; người nghe bằng c&aacute;c phương tiện trợ gi&uacute;p. C&aacute;c hoạt động thực hiện dựa tr&ecirc;n trạng th&aacute;i lu&ocirc;n trả về trạng th&aacute;i mới. C&oacute; thể thấy rằng, trạng th&aacute;i c&oacute; thể đo&aacute;n trước dễ d&agrave;ng. Lập tr&igrave;nh vi&ecirc;n c&oacute; thể tạo một thư viện cho ứng dụng đăng nhập với lệnh: const store = createStore ( LoginComponent );&nbsp;
Redux c&oacute; một trạng th&aacute;i chung trong thư viện v&agrave; c&aacute;c th&agrave;nh phần đều c&oacute; thể truy cập v&agrave;o trạng th&aacute;i đ&oacute;. Điều đ&oacute; gi&uacute;p loại bỏ ho&agrave;n to&agrave;n y&ecirc;u cầu chuyển trạng th&aacute;i từ th&agrave;nh phần n&agrave;y sang th&agrave;nh phần kh&aacute;c một c&aacute;ch li&ecirc;n tục. Người d&ugrave;ng cũng c&oacute; thể lựa chọn th&agrave;nh phần từ thư viện cho một th&agrave;nh phần cụ thể , gi&uacute;p ứng dụng được tối ưu ho&aacute; hơn. Dưới đ&acirc;y l&agrave; v&iacute; dụ về việc Redux c&oacute; thể cải thiện th&agrave;nh phần đăng nhập đ&atilde; được triển khai trước đ&oacute;:&nbsp;
<code>Class App Extends React. Component {&nbsp;</code>
<code>render () { return (&lt;div&gt;&lt;Trạng th&aacute;i người d&ugrave;ng= { this .Props.User.Name} /&gt;&lt;Loginlogin= { this .Props.SetLoginStatus} /&gt;&lt;/div&gt;) } }</code>
<h2 style="text-align: justify;">L&yacute; do n&ecirc;n sử dụng Redux?</h2>
Redux mang đến những ưu điểm tuyệt vời khi sử dụng để quản l&yacute; trạng th&aacute;i của Reactjs:&nbsp;
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Redux l&agrave;m trạng th&aacute;i c&oacute; thể dự đo&aacute;n được: Nhờ c&oacute; Redux, khi c&ugrave;ng một trạng th&aacute;i v&agrave; Actions được chuyển tới bộ Reducers, kết quả tương tự lu&ocirc;n được tạo ra bởi bộ Reducers l&agrave; c&aacute;c h&agrave;m thuần tu&yacute;. C&aacute;c trạng th&aacute;i l&agrave; bất biến v&agrave; kh&ocirc;ng bị thay đổi, hỗ trợ người d&ugrave;ng thực hiện c&aacute;c t&aacute;c vụ kh&oacute; khăn như ho&agrave;n to&agrave;n v&agrave; l&agrave;m lại v&ocirc; hạn.&nbsp;</li>
<li style="font-weight: 400;" aria-level="1">C&oacute; thể bảo tr&igrave; được do cấu tr&uacute;c được bố tr&iacute; nghi&ecirc;m ngặt về c&aacute;ch tổ chức m&atilde;. Điều đ&oacute; cũng gi&uacute;p &iacute;ch rất nhiều khi t&aacute;ch biệt logic nghiệp vụ của m&igrave;nh khỏi c&acirc;y th&agrave;nh phần. Muốn l&agrave;m việc với c&aacute;c ứng dụng quy m&ocirc; lớn, bạn cần đảm bảo được ứng dụng dễ dự đo&aacute;n v&agrave; bảo tr&igrave;.&nbsp;</li>
<li style="font-weight: 400;" aria-level="1">Gỡ lỗi nhanh ch&oacute;ng, dễ d&agrave;ng: Redux gi&uacute;p bạn gỡ lỗi ứng dụng, m&atilde; h&oacute;a, mạng v&agrave; c&aacute;c dạng lỗi kh&aacute;c một c&aacute;ch dễ d&agrave;ng. Ngo&agrave;i ghi nhật k&yacute;, Redux c&ograve;n cung cấp c&ocirc;ng cụ DevTools, người d&ugrave;ng c&oacute; thể trải nghiệm c&aacute;c h&agrave;nh động li&ecirc;n tục khi l&agrave;m mới trang. Việc gỡ lỗi ở c&aacute;c ứng dụng quy m&ocirc; vừa v&agrave; lớn mất nhiều thời gian hơn.&nbsp;</li>
<li style="font-weight: 400;" aria-level="1">Lợi &iacute;ch về hiệu suất thực hiện: Hiệu suất Redux được tối ưu ho&aacute; nhằm gi&uacute;p c&aacute;c th&agrave;nh phần đ&atilde; kết nối của ri&ecirc;ng bạn hiển thị khi thực sự cần thiết.&nbsp;</li>
<li style="font-weight: 400;" aria-level="1">Kiểm tra dễ d&agrave;ng: C&aacute;c chức năng được sử dụng để thay đổi trạng th&aacute;i của c&aacute;c chức năng thuần tu&yacute; gi&uacute;p bạn kiểm tra ứng dụng dễ d&agrave;ng hơn.&nbsp;</li>
<li style="font-weight: 400;" aria-level="1">Trạng th&aacute;i bền bỉ: Redux cho ph&eacute;p người d&ugrave;ng duy tr&igrave; một số trạng th&aacute;i bền bỉ của ứng dụng bộ nhớ v&agrave; c&aacute;c trạng th&aacute;i đ&atilde; được kh&ocirc;i phục sau khi l&agrave;m mới.&nbsp;</li>
<li style="font-weight: 400;" aria-level="1">Kết xuất m&aacute;y chủ: Redux c&oacute; thể được sử dụng để kết xuất ph&iacute;a m&aacute;y chủ với c&aacute;c hoạt động xử l&yacute; kết xuất ban đầu của ứng dụng. C&aacute;c th&agrave;nh phần bắt buộc kh&aacute;c cần được hiển thị dưới dạng HTML v&agrave; được gửi đến c&aacute;c m&aacute;y kh&aacute;ch.&nbsp;</li>
</ul>
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" title="Redux đem lại những ưu điểm đ&aacute;ng kể để quản l&yacute; trạng th&aacute;i của Reactjs" src="https://tek4.vn/public_files/9d9e7566-8f89-43c8-96fa-8898676da171" alt="L&yacute; do n&ecirc;n d&ugrave;ng Redux" />
<h2 style="text-align: justify;">Triển khai Redux trong ứng dụng ph&aacute;t triển</h2>
Gỡ lỗi c&aacute;c ứng dụng React khi c&oacute; trạng th&aacute;i phức tạp trở n&ecirc;n kh&oacute; khăn hơn. Tuy nhi&ecirc;n, nếu trong qu&aacute; tr&igrave;nh ph&aacute;t triển ứng dụng, bạn gi&aacute;m s&aacute;t v&agrave; theo d&otilde;i trạng th&aacute;i của Redux cho to&agrave;n bộ người d&ugrave;ng, h&atilde;y thử ngay LogRocket. LogRocket giống như một DCR cho c&aacute;c ứng dụng web.&nbsp;
To&agrave;n bộ mọi thứ diễn ra với website theo đ&uacute;ng nghĩa đen nhưng thay v&igrave; đo&aacute;n l&yacute; do lại c&oacute; sự kiện n&agrave;y, bạn c&oacute; thể tổng hợp v&agrave; b&aacute;o c&aacute;o về trạng th&aacute;i. G&oacute;i phần mềm LogRocket sẽ gi&uacute;p bạn biết được trạng th&aacute;i ứng dụng của bạn đang ở trạng th&aacute;i n&agrave;o khi sự cố xảy ra. Hơn nữa, g&oacute;i phần mềm trung gian đều được th&ecirc;m một số lớp mới để tăng khả năng hiển thị c&aacute;c phi&ecirc;n bản cho người d&ugrave;ng.&nbsp;
Tổng kết&nbsp;
Trong b&agrave;i viết n&agrave;y, Tek4.vn đ&atilde; gi&uacute;p bạn hiểu được Redux l&agrave; g&igrave;, c&aacute;c nguy&ecirc;n l&yacute; v&agrave; c&aacute;ch thức hoạt động của n&oacute;. Trong qu&aacute; tr&igrave;nh l&agrave;m việc, Redux chủ yếu được sử dụng để tương t&aacute;c với server v&agrave; xử l&yacute; data. Hy vọng với những chia sẻ tr&ecirc;n c&oacute; thể gi&uacute;p bạn đọc mở mang th&ecirc;m c&aacute;c kiến thức mới mẻ, th&uacute; vị về c&ocirc;ng nghệ th&ocirc;ng tin.&nbsp;

Admin

Redux là gì? Lý do bạn nên sử dụng Redux trong javascript

Cùng tác giả

Admin

Có liên quan