React Redux là gì và bạn sử dụng nó như thế nào?
Redux là một thư viện quản lý trạng thái miễn phí hoạt động trên front-end của các ứng dụng JavaScript, quản lý trạng thái của từng thành phần trong giao diện người dùng. Thư viện Redux tạo điều kiện phân tách giữa mã quản lý và lưu trữ dữ liệu trong ứng dụng và mã quản lý các sự kiện và ảnh hưởng của chúng trên các thành phần khác nhau của giao diện người dùng của ứng dụng.
Một trong những điểm bán hàng chính của Redux là nó linh hoạt. Bạn có thể sử dụng Redux với gần như bất kỳ khung hoặc thư viện JavaScript nào.
Nhóm Redux đã tạo ba thư viện, đó là Redux, React-Redux và Redux Toolkit. Cả ba thư viện làm việc cùng nhau để mang lại cho bạn trải nghiệm phát triển React của bạn và trong bài viết hướng dẫn này, bạn sẽ học cách sử dụng chúng.
Mục Lục
Tầm quan trọng của React-Redux
Mặc dù Redux là một thư viện quản lý nhà nước độc lập, việc sử dụng nó với bất kỳ thư viện hoặc khuôn khổ front-end nào đều yêu cầu thư viện ràng buộc giao diện người dùng. Thư viện ràng buộc giao diện người dùng xử lý logic tương tác vùng chứa trạng thái (hoặc lưu trữ), là một tập hợp các bước được xác định trước để kết nối khuôn khổ giao diện người dùng với thư viện Redux.
React-Redux là thư viện ràng buộc giao diện người dùng Redux chính thức cho các ứng dụng React và nó được duy trì bởi nhóm Redux.
Cài đặt Redux trong Thư mục dự án của bạn
Có hai cách để truy cập vào thư viện Redux trong ứng dụng React của bạn. Cách tiếp cận được nhóm Redux đề xuất là sử dụng lệnh sau khi tạo một dự án React mới:
npx create-react-app my-app --template redux
Lệnh trên tự động định cấu hình Bộ công cụ Redux, React-Redux và cửa hàng Redux. Tuy nhiên, nếu bạn muốn sử dụng Redux trong một dự án React hiện có, thì bạn có thể chỉ cần cài đặt thư viện Redux làm phụ thuộc bằng lệnh sau:
npm install redux
Tiếp theo là thư viện giao diện người dùng liên kết React-Redux:
npm install react-redux
Và bộ công cụ Redux:
npm install @reduxjs/toolkit
Thư viện Redux Toolkit cũng rất quan trọng vì nó giúp quá trình cấu hình cửa hàng Redux nhanh chóng và dễ dàng.
Tạo cửa hàng Redux
Trước khi có thể bắt đầu làm việc với thư viện Redux, bạn cần tạo một vùng chứa (hoặc lưu trữ) trạng thái Redux. Tạo một cửa hàng Redux là cần thiết vì nó là đối tượng lưu trữ trạng thái ứng dụng Redux toàn cầu.
React, giống như hầu hết các khung công tác front-end, có một điểm đầu vào trong các ứng dụng của nó, đó là một tệp hoặc nhóm tệp ở cấp cao nhất. Các index.html và index.js tệp là hai tệp ở cấp cao nhất của ứng dụng React, ở trên App.js tệp và tất cả các thành phần trong ứng dụng.
Nên index.js tệp là nơi lý tưởng để tạo một cửa hàng Redux.
Cập nhật index.js với Redux Store
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import reportWebVitals from "./reportWebVitals"
import {configureStore} from "@reduxjs/toolkit"
import { Provider } from 'react-redux'
import user from './reducers/user'
const store = configureStore({
reducer:{
user
}
})
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
)
reportWebVitals();
Có rất nhiều thứ để giải nén trong đoạn mã trên, nhưng nơi tốt nhất để bắt đầu là với configStore chức năng. Ngay lập tức, bạn sẽ bắt đầu thấy những lợi ích của việc cài đặt thư viện Bộ công cụ Redux như configStore hàm tạo cửa hàng Redux chỉ với ba dòng mã.
Ứng dụng React của bạn sẽ không biết rằng cửa hàng Redux tồn tại nếu không có thành phần nhà cung cấp, đến từ thư viện ràng buộc React-Redux. Thành phần nhà cung cấp có một chỗ dựa duy nhất (cửa hàng) và tự bao bọc xung quanh ứng dụng React, làm cho cửa hàng Redux có thể truy cập được trên toàn cầu.
Lần nhập mới thứ ba và cuối cùng trong index.js tệp ở trên là giảm người dùng, điều này cực kỳ quan trọng đối với hoạt động của cửa hàng Redux của bạn.
Tại sao Hộp giảm tốc lại quan trọng?
Mục đích của bộ giảm tốc là thay đổi Trạng thái thành phần giao diện người dùng dựa trên một hành động đã thực hiện. Ví dụ: nếu bạn đang tạo ứng dụng trường học trực tuyến, bạn sẽ yêu cầu mỗi người dùng đăng nhập vào ứng dụng để có quyền truy cập bằng thành phần đăng nhập. Một thành phần tuyệt vời khác cho ứng dụng này là thành phần người dùng đang hoạt động, thành phần này sẽ hiển thị tên hoặc địa chỉ email của mỗi người dùng khi họ đăng nhập vào ứng dụng của bạn.
Trong ví dụ trên, thành phần người dùng đang hoạt động sẽ thay đổi mỗi khi người dùng thực hiện hành động đăng nhập vào tài khoản của họ. Do đó, ví dụ này là một tình huống lý tưởng cho một bộ giảm tốc. Điều quan trọng cần nhớ là một bộ giảm thiểu chỉ có thể thực hiện chức năng của nó vì Redux store cho phép nó truy cập vào trạng thái của bất kỳ thành phần nào và hành động mà nó cần để thực hiện nhiệm vụ của mình.
Tạo bộ giảm tốc người dùng
import { createSlice } from "@reduxjs/toolkit";
export const userSlice = createSlice({
name: "user",
initialState: { value: {email: ""}},
reducers: {
login: (state, action) => {
state.value = action.payload
},
}
})
export const {login} = userSlice.actions
export default userSlice.reducer;
Trong React’s src danh mục bạn có thể tạo ra một thư mục giảm tốc, đó là nơi bạn sẽ lưu trữ giảm người dùng và bất kỳ trình giảm thiểu nào khác mà bạn muốn thêm vào cửa hàng Redux của mình. Các user.js tệp ở trên nhập createSlice chức năng từ Bộ công cụ Redux.
Các createSlice hàm chấp nhận một Tên, một trạng thái ban đầu, và một đối tượng giảm tốc lưu trữ nhiều chức năng giảm thiểu. Tuy nhiên, đối tượng bộ giảm tốc ở trên chỉ có một hàm bộ giảm tốc được gọi là đăng nhập lấy một trạng thái và một hành động làm đối số và trả về một trạng thái mới.
Tệp user.js xuất trình giảm đăng nhập. Thành phần đăng nhập nhập nó và sử dụng nó trong useDispatch () cái móc.
Tạo thành phần đăng nhập
import React from 'react';
import Link from '@mui/material/Link';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import { Button, Box } from '@mui/material';
import { useDispatch } from 'react-redux';
import { login } from '../reducers/user';
import { useState } from 'react';
function Signin() {
const dispatch = useDispatch()
const [email, setEmail] = useState('')
const handleSubmit = () => {
dispatch(login({email: email}))
}return (
<div>
<Box
sx={{
my: 8,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}>
<Typography variant="h4"> Sign In </Typography>
<TextField
label="Email Address"
required
id="email"
name="email"
margin="normal"
onChange={(e) => setEmail(e.target.value)}
/>
<TextField
label="Password"
required
id="password"
name="password"
type="password"
margin="normal"
/>
<Link
href="#"
sx={{mr: 12, mb: 2}}
>
forget password?
</Link>
<Button
variant="contained"
sx={{mt: 2}}
onClick={handleSubmit}
>
Sign In
</Button>
</Box>
</div>
);
}
export default Signin;
Thành phần đăng nhập ở trên sử dụng thư viện MUI. Nó tạo ra một biểu mẫu đăng nhập đơn giản yêu cầu email và mật khẩu của người dùng. Nhấp vào nút đăng nhập sẽ kích hoạt chức năng onClick, sẽ gọi xử lý chức năng.
Các xử lý chức năng sử dụng useState () và useDispact () móc cùng với trình giảm đăng nhập để cung cấp địa chỉ email của người dùng đang hoạt động trong cửa hàng Redux. Từ cửa hàng Redux, mọi thành phần trong ứng dụng React giờ đây đều có quyền truy cập vào email của người dùng đang hoạt động.
Thành phần người dùng đang hoạt động sau đây truy xuất địa chỉ email của người dùng đang hoạt động với sự trợ giúp của useSelector () móc và hiển thị nó vào giao diện người dùng ứng dụng.
Tệp ActiveUser.js
import React from "react";
import { useSelector } from "react-redux";function ActiveUsers() {
const user = useSelector((state) => state.user.value)
return (
<div>
<h2>Active Users</h2>
<p> {user.email} </p>
</div>
);
}
Tệp App.js đã cập nhật
Hãy xem đoạn mã này:
import React from "react"; import ActiveUsers from "./components/ActiveUsers"; import Signin from "./components/Signin";
function App() {
return ( <div> <ActiveUsers/> <Signin/> </div>
);
}
export default App; Các App.js tệp ở trên hiển thị cả người dùng đang hoạt động và các thành phần đăng nhập trong ứng dụng React của bạn, tạo ra kết quả sau trong trình duyệt của bạn:
Nếu người dùng đăng nhập vào ứng dụng, thành phần người dùng đang hoạt động sẽ ngay lập tức cập nhật bằng email người dùng hoạt động mới.
Giao diện người dùng đã cập nhật
Khi nào bạn nên sử dụng Redux?
Redux là một trong những thư viện quản lý nhà nước phổ biến nhất, chủ yếu là vì nó thực hiện một công việc xuất sắc trong việc tạo mã có thể dự đoán và đáng tin cậy. Nếu nhiều thành phần trong một ứng dụng sử dụng cùng một trạng thái ứng dụng thì Redux là lựa chọn lý tưởng.
Sử dụng ví dụ trường học ở trên, thành phần đăng nhập, thành phần người dùng đang hoạt động, thành phần tham gia lớp học và thậm chí cả thành phần hồ sơ sẽ cần địa chỉ email của người dùng (hoặc một số định danh duy nhất khác). Đây là lý do tại sao Redux là lựa chọn tốt nhất ở đây.
Tuy nhiên, nếu bạn có trạng thái chỉ được sử dụng bởi một hoặc hai thành phần, thì một lựa chọn tốt hơn có thể là React props.
Đọc tiếp
Giới thiệu về tác giả
