useContextlà một trong những hook cơ bản nhất của React, nó cho phép chúng ta truyền dữ liệu từ component cha tới các component con mà không cần phải sử dụng props. Khi sử dụng useContext, chúng ta có thể truy cập vào các giá trị được lưu trữ trong context, giúp cho việc truyền dữ liệu giữa các component trong ứng dụng trở nên dễ dàng hơn.
Trong Redux, chúng ta có thể sử dụng useContext để truyền các giá trị được lưu trữ trong Redux store tới các component con.
Giới thiệu về Redux
Redux là một thư viện quản lý state trong ứng dụng web và mobile, được sử dụng chủ yếu trong các ứng dụng React và React Native. Redux giúp cho việc quản lý state trở nên đơn giản hơn, giúp cho việc phát triển các ứng dụng phức tạp trở nên dễ dàng hơn.
Sự khác nhau của useContex và Redux
useContext và Redux đều là các công cụ hỗ trợ quản lý state trong ứng dụng React, tuy nhiên chúng có sự khác biệt như sau:
useContext là một trong những hooks cơ bản nhất của React, nó cho phép chúng ta truyền dữ liệu từ component cha tới các component con một cách đơn giản hơn mà không cần sử dụng props. Trong khi đó, Redux là một thư viện quản lý state phổ biến trong React, giúp chúng ta quản lý state toàn cục cho ứng dụng.
useContext được sử dụng để truyền dữ liệu giữa các component con, trong khi Redux được sử dụng để quản lý state toàn cục của ứng dụng.
Trong Redux, các giá trị được lưu trữ trong store và truy cập thông qua các action và reducer, trong khi đó useContext cho phép chúng ta truyền dữ liệu giữa các component một cách trực tiếp.
Sử dụng Redux đòi hỏi thêm công việc để cấu hình và quản lý state, trong khi đó sử dụng useContext đơn giản hơn và không đòi hỏi nhiều công việc cấu hình.
Ví dụ về useContext và Redux
Để minh họa sự khác biệt giữa useContext và Redux, chúng ta sẽ xem xét ví dụ đơn giản về việc truyền dữ liệu giữa các component trong React:
Giả sử chúng ta có một ứng dụng React đơn giản, bao gồm các component sau:
- App: là component gốc, chứa một state cần được truyền đến component con.
- Header: là component con, hiển thị thông tin đầu trang của ứng dụng và cần truy cập vào state của component gốc.
- Content: là component con, hiển thị nội dung chính của ứng dụng và cũng cần truy cập vào state của component gốc.
Chúng ta có thể giải quyết vấn đề này bằng hai cách khác nhau: sử dụng useContext hoặc Redux.
- Sử dụng useContext:
Đầu tiên, chúng ta sẽ tạo một context mới trong App component:
import React, { createContext, <a href="https://nodemy.vn/doi-chut-ve-usestate-trong-react-hooks/">useState</a> } from "react";
import Header from "./Header";
import Content from "./Content";
export const AppContext = createContext();
<a href="https://nodemy.vn/tim-hieu-ve-ham-trong-javascript-cach-tao-truyen-tham-so-va-su-dung-mot-cach-hieu-qua-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">function</a> App() {
const [state, setState] = useState({ title: "Ứng dụng React" });
return (
<div className="App">
<AppContext.Provider value={[state, setState]}>
<Header />
<Content />
</AppContext.Provider>
</div>
);
}
export default App;
Sau đó, chúng ta sẽ sử dụng useContext trong Header và Content components để truy cập vào state của App component:
import React, { useContext } from "react";
import { AppContext } from "./App";
function Header() {
const [state, setState] = useContext(AppContext);
return (
<header>
<h1><span class="ez-toc-section" id="statetitle"></span>{state.title}<span class="ez-toc-section-end"></span></h1>
</header>
);
}
export default Header;
import React, { useContext } from "react";
import { AppContext } from "./App";
function Content() {
const [state, setState] = useContext(AppContext);
return (
<div>
<p>{state.title}</p>
</div>
);
}
export default Content;
- Sử dụng Redux:
Đầu tiên, chúng ta sẽ cài đặt Redux và tạo ra một store mới:
import { createStore } from "redux";
const initialState = { title: "Ứng dụng React" };
function reducer(state = initialState, action) {
switch (action.type) {
case "CHANGE_TITLE":
return { ...state, title: action.payload };
default:
return state;
}
}
const store = createStore(reducer);
export default store;
Sau đó, chúng ta sẽ sử dụng useSelector và useDispatch trong Header và Content components để truy cập vào state của store:
import React from "react";
import { useSelector } from "react-redux";
function Header() {
const title = useSelector((state) => state.title);
return (
<header>
<h1><span class="ez-toc-section" id="title"></span>{title}<span class="ez-toc-section-end"></span></h1>
</header>
);
}
export default Header;
Trong ví dụ trên, chúng ta đã sử dụng cả useContext và Redux để quản lý trạng thái của ứng dụng. Thấy được rằng cả hai cách làm đều có thể được sử dụng và phụ thuộc vào yêu cầu của từng dự án cụ thể.
Kết luận và bài viết có liên quan
Kết luận : Trong bài viết này, chúng ta đã tìm hiểu về các hooks trong React như useState, useEffect, useReducer và useLayoutEffect. Chúng ta cũng đã thảo luận về các hooks trong Redux như useSelector và useDispatch, cùng với cách sử dụng useContext để kết hợp với Redux.
Bài viết có liên quan:
Tìm hiểu useDispatch trong Redux Cách sử dụng useLayoutEffect trong React Js
Cách sử dụng useLayoutEffect trong React Js Cách sử dụng boostrap icon và font awesome icon vào trong React Js
