ReactJS - Redux: Hướng dẫn cho người mới bắt đầu

Xin chào bạn, người học lập trình đầy tham vọng! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình thú vị vào thế giới của ReactJS và Redux. Là một người đã dạy khoa học máy tính trong nhiều năm, tôi đã chứng kiến biết bao sinh viên trở nên hứng thú khi họfinally hiểu được những khái niệm này. Vậy hãy cùng nhau nhảy vào và tạo nên phép màu nào!

Redux là gì?

Trước khi chúng ta nhảy vào mã, hãy hiểu Redux là gì. Hãy tưởng tượng bạn đang tổ chức một bữa tiệc lớn (đó là ứng dụng của bạn), và bạn cần theo dõi tất cả các khách mời, thức ăn và âm nhạc (đó là trạng thái của ứng dụng bạn). Redux giống như một người tổ chức tiệc siêu hiệu quả, người giữ mọi thứ được tổ chức gọn gàng ở một nơi trung tâm.

Redux là một thư viện quản lý trạng thái giúp bạn quản lý dữ liệu trong các ứng dụng React của mình một cách hiệu quả hơn. Nó đặc biệt hữu ích cho các ứng dụng lớn hơn, nơi việc truyền dữ liệu giữa các thành phần có thể trở nên phức tạp.

Các khái niệm cốt lõi của Redux

Hãy phân tích các khái niệm chính của Redux:

1. Store

Store giống như một bình lớn chứa tất cả trạng thái của ứng dụng bạn. Nó là nguồn duy nhất của sự thật cho dữ liệu của ứng dụng bạn.

2. Actions

Actions giống như những thông điệp cho biết gì đã xảy ra trong ứng dụng của bạn. Chúng là những đối tượng JavaScript thuần túy phải có thuộc tính type.

3. Reducers

Reducers là các hàm chỉ định cách trạng thái của ứng dụng thay đổi đối với các hành động. Chúng nhận trạng thái hiện tại và một hành động làm đối số và trả về một trạng thái mới.

4. Dispatch

Dispatch là một phương thức gửi hành động đến store để cập nhật trạng thái.

Bây giờ, hãy xem các khái niệm này trong hành động với một số ví dụ mã!

Thiết lập Redux

Đầu tiên, chúng ta cần cài đặt Redux và React-Redux:

npm install redux react-redux

Bây giờ, hãy tạo một ứng dụng đếm đơn giản để minh họa cách Redux hoạt động.

Tạo Store

import { createStore } from 'redux';

// Đây là reducer của chúng ta
const counterReducer = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
};

// Tạo store
const store = createStore(counterReducer);

Trong ví dụ này, chúng ta đang tạo một store với một reducer đếm đơn giản. Reducer lắng nghe các hành động 'INCREMENT' và 'DECREMENT' và cập nhật trạng thái tương ứng.

Định nghĩa Actions

// Các hàm tạo hành động
const increment = () => ({ type: 'INCREMENT' });
const decrement = () => ({ type: 'DECREMENT' });

Đây là các hàm tạo hành động của chúng ta. Chúng trả về các đối tượng hành động mà reducer sẽ phản hồi.

Sử dụng Component Provider

Component Provider làm cho store Redux khả dụng cho bất kỳ component con nào cần truy cập store Redux.

import React from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import counterReducer from './reducers';
import App from './App';

const store = createStore(counterReducer);

const Root = () => (
<Provider store={store}>
<App />
</App>
);

export default Root;

Mã này bao quanh component chính App của chúng ta với Provider, cho phép tất cả các component truy cập vào store.

Kết nối Components với Redux

Bây giờ, hãy tạo một component Counter sử dụng store Redux của chúng ta:

import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from './actions';

const Counter = ({ count, increment, decrement }) => (
<div>
<h2>Đếm: {count}</h2>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</div>
);

const mapStateToProps = (state) => ({
count: state,
});

const mapDispatchToProps = {
increment,
decrement,
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

Hãy phân tích điều này:

1. Chúng ta import connect từ react-redux, cho phép chúng ta kết nối component của mình với store Redux.
2. mapStateToProps告诉 Redux làm thế nào để ánh xạ trạng thái đến props trong component của chúng ta.
3. mapDispatchToProps cho phép chúng ta ánh xạ các hàm tạo hành động đến props.
4. connect bao quanh component của chúng ta, chèn state và các hàm tạo hành động vào props.

Các phương thức API quan trọng của Redux

Dưới đây là bảng các phương thức API quan trọng của Redux:

Phương thức	Mô tả
createStore(reducer, [preloadedState], [enhancer])	Tạo một Redux store
combineReducers(reducers)	Kết hợp nhiều reducer thành một hàm reducer duy nhất
applyMiddleware(...middlewares)	Áp dụng middleware cho phương thức dispatch của Redux store
bindActionCreators(actionCreators, dispatch)	Chuyển đổi một đối tượng có giá trị là các hàm tạo hành động thành một đối tượng với cùng các khóa nhưng mỗi hàm tạo hành động được bao quanh bởi một cuộc gọi dispatch

Kết luận

Và thế là xong! Chúng ta đã bao gồm các основы Redux, từ việc hiểu các khái niệm cốt lõi đến việc triển khai nó trong một ứng dụng React. Nhớ rằng, Redux có thể có vẻ phức tạp ban đầu, nhưng nó giống như việc học骑自行车 - một khi bạn đã thành thạo, bạn sẽ tự hỏi làm thế nào bạn đã quản lý mà không có nó!

Trong hành trình tiếp theo của bạn, bạn sẽ khám phá các tính năng nâng cao của Redux, như middleware và các hành động async. Nhưng hiện tại, hãy tự động viên mình - bạn đã迈出了第一步 vào thế giới quản lý trạng thái lớn hơn!

Tiếp tục mã hóa, tiếp tục học hỏi, và quan trọng nhất, tiếp tục vui vẻ! Hẹn gặp lại lần sau, chúc bạn thành công với Redux!

Credits: Image by storyset