Hướng dẫn tích hợp Redux Toolkit trong React

09/05/2023 | 1646

Redux Toolkit là một thư viện phổ biến để xây dựng các ứng dụng Redux. Nó cung cấp một bộ công cụ và tiện ích có thể giúp bạn giảm boilerplate code và đơn giản hóa Logic Apps của bạn. Trong bài này, VietnamWorks inTECH sẽ hướng dẫn bạn cách thiết lập Redux Toolkit và sử dụng nó để state management trong một aplication đơn giản.

YÊU CẦU

Trước khi bước vào hướng dẫn chi tiết, hãy đảm bảo bạn đã thiết lập những thành phần sau:

Code editor (Visual Studio Code chẳng hạn)
Node.js và NPM

BẮT ĐẦU

Để bắt đầu với Redux Toolkit, trước tiên bạn cần tạo một ứng dụng React mới. Chạy các lệnh sau trên terminal:

npx create-react-app my-app
cd my-app
npm start

Thao tác này sẽ tạo một React application mới có tên "my-app" và khởi động một local development server.

Tiếp theo, chúng ta cần cài đặt Redux Toolkit. Chạy lệnh sau trong terminal.

npm install @reduxjs/toolkit

Thiết lập Redux Store

Trong Redux, trạng thái state của application được quản lý bởi một đối tượng gọi là store. Để thiết lập, trước tiên chúng ta cần xác định trạng thái slice mà chúng ta muốn quản lý.

Một slice là một phần cụ thể của trạng thái state được quản lý bởi phương thức reduce. Function reducer sẽ trích ra state hiện tại và một action, đồng thời trả về state mới dựa trên action đó.

Tạo một tệp mới có tên "counterSlice.js" trong thư mục "src" và thêm đoạn code sau:

import { createSlice } from '@reduxjs/toolkit';

export const counterSlice = createSlice({
name: 'counter',
initialState: {
value: 0,
},
reducers: {
increment: state => {
state.value += 1;
},
decrement: state => {
state.value -= 1;
},
},
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

Đoạn code này định nghĩa một slice của trạng thái state được gọi là counter, với giá trị ban đầu là 0. Nó cũng định nghĩa hai function reduce increment và decrement, chúng sẽ sửa đổi giá trị của trạng thái state.

Tiếp theo, chúng ta cần tạo store. Tạo một tệp mới có tên "store.js" trong thư mục "src" và thêm đoạn code sau:

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

export default configureStore({
reducer: {
counter: counterReducer,
},
});

Code này import function configureStore từ Redux Toolkit, cũng như counterReducer từ file "counterSlice.js". Tiếp theo, chúng ta sẽ dùng function configureStore để tạo store, counterReducer sẽ là reducer cho slice counter của trạng thái state.

Kết nối Components với Store

Sau khi đã thiết lập store, tiếp theo bạn cần phải kết nối các component với store để chúng có thể truy cập và sửa đổi trạng thái state.

Tạo một tệp mới có tên "App.js" trong thư mục "src" và thêm đoạn code sau:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';

function App() {
const counter = useSelector(state => state.counter.value);
const dispatch = useDispatch();

return (
<div>
<h1>Counter: {counter}</h1>
<button onClick={() => dispatch(increment())}>Increment</button>
<button onClick={() => dispatch(decrement())}>Decrement</button>
</div>
);
}

export default App;

Đoạn code này sẽ import hook useSelector và useDispatch từ thư viện react-redux. Hook useSelector được sử dụng để trích xuất dữ liệu từ Redux store và hook useDispatch được sử dụng để gửi action đến store.

Hook useSelector sẽ trích giá trị hiện tại của slice counter từ trạng thái state và hook useDispatch để lấy tham chiếu đến function.

Câu lệnh return hiển thị một giao diện người dùng đơn giản, chúng sẽ hiển thị giá trị hiện tại của counter và hai button gửi action increment và decrement khi được nhấp.

Lời kết

Như vậy, bạn đã vừa thiết lập Redux Store với Redux Toolkit. Nếu bạn thấy hướng dẫn này hữu ích, nhớ chia sẻ cho bạn bè cùng biết nhé.

VietnamWorks inTECH