9

REACT REDUX

Trong chương 6, chúng ta đã biết State là một trong những dạng dữ

liệu quan trọng trong dự án React Native. State giống như một kho

lưu trữ dữ liệu cho các component trong ReactJS. Nó được sử dụng

để cập nhật component khi người dùng thực hiện một số hành động

như nhấp vào nút, nhập văn bản, ẩn hiện view nào đó,v.v...

Hiện tại chúng ta mới biết cách khai báo và sử dụng state trực tiếp

ngay trong từng component, thông qua sử dụng useState hook. Với

cách làm này thì không có gì sai và mọi người cũng vẫn đang làm như

vậy.

Tuy nhiên, nếu state đó được sử dụng ở nhiều component khác

nhau, nhiều màn hình trong ứng dụng cùng dùng chung một state.

Lúc này bạn phải làm sao?

Mình lấy ví dụ điển hình đó là trường hợp bạn cần lưu trạng thái đăng

nhập của một tài khoản. Trạng thái đăng nhập sẽ ảnh hưởng tới toàn

VNTALKING.COM 133
bộ các màn hình trong ứng dụng, bạn có thể hiểu nó như một dữ liệu

global cho toàn ứng dụng vậy.

Tiếp tục nhé! Vấn đề bắt đầu khó khăn hơn khi ứng dụng ngày càng

có nhiều state dạng global như vậy. Nào là trạng thái đăng nhập,

theme (dark mode, light mode), các cấu hình chung của ứng

dụng,v.v... Chúng ta cần phải có một giải pháp để quản lý các state

global này. Trong React Native, giải pháp phổ biến nhất là sử dụng

Redux.

Khái niệm chung Redux

Redux là một công cụ quản lý state. Mặc dù nó được sử dụng nhiều

với React. Nên nhiều người nhầm tưởng Redux là thư viện dành riêng

cho React. Nhưng thực tế thì nó có thể được sử dụng với bất kỳ

framework hoặc thư viện JavaScript nào khác.

Với Redux, các state của ứng dụng được giữ trong một "store" và các

component đều có thể truy cập vào store này để lấy state.

Về cơ bản thì Redux được xây dựng có nhiều điểm chung với Flux của

Facebook.

Redux được ra đời từ việc lấy cảm hứng từ kiến trúc Flux của

Facebook. Tuy nhiên, cách tiếp cận của Redux lại hơi khác Flux một

chút. Để rõ hơn phần này, chúng ta cùng xem nguyên lý hoạt động cơ

bản của Redux nhé.

VNTALKING.COM 134
Nguyên lý hoạt động Redux

Để sử dụng Redux dễ dàng hơn, chúng ta cần phải “thông suốt” được

3 nguyên lý chính của Redux:

• Single store: Nguyên tắc đầu tiên của Redux là tất cả các state

được chứa trong một store duy nhất, store này thường là một

Object.

• Immutable: State của ứng dụng là bất biến (Immutable). Điều

này có nghĩa là Object để lưu trữ state không cho phép chỉnh

sửa, cập nhật dữ liệu trực tiếp từ bất kỳ component nào. Để cập

nhật state trong store từ các component, chúng ta bắt buộc

phải tuân theo quy trình của Redux, đó là gửi các actions và để

các reducer function cập nhật state.

• Pure functions: Tất cả các functions để cập nhật hay tạo mới

state (Redux gọi các function này là reducer) phải là các pure

function. Mình hiểu đơn giản pure function là một hàm mà khi

các params đầu vào không thay đổi thì kết quả return luôn luôn

không thay đổi, dù hàm đó có thực thi bao nhiêu lần đi chăng

nữa.

Các thành phần của React Redux

Từ những nguyên lý trên, chúng ta bắt đầu tìm hiểu cụ thể trong

Redux có những thành phần gì? vai trò và nhiệm vụ của chúng như

nào.

VNTALKING.COM 135
Hình dưới đây minh họa cho toàn bộ cơ chế hoạt động của Redux:

Mình sẽ giải thích chi tiết hơn các thành phần trong hình trên:

“Store” có nhiệm vụ lưu trữ toàn bộ state của ứng dụng, nó được tạo

thông qua các reducer.

Để tạo store, chúng ta sử dụng hàm createStore(). Ví dụ như đoạn mã

dưới đây:

// Khởi tạo store

const store = createStore(loggeduser);

Chúng ta chỉ nên tạo duy nhất một store để dùng chung cho toàn

ứng dụng thôi nhé.

“Actions” thực chất là đối tượng Javascript được gửi đi bằng phương

thức dispatch() của React Native. Những actions này bắt buộc phải có

thuộc tính type để xác định loại action được thực hiện.

VNTALKING.COM 136
 Giá trị của thuộc tính type là duy nhất, tương ứng với

action đó. Bạn không nên để trùng nhau vì sau này sẽ phát

sinh nhiều lỗi rất khó chịu. Kiểu như dispatch() một action

mà ứng dụng lại cập nhật trạng thái lung tung, không đúng

ý của mình.

Trong đối tượng Action này, bạn hoàn toàn có thể gửi thêm thông tin

thông qua thuộc tính payload. Ví dụ: thông tin là các giá trị mới của

state cần cập nhật chẳng hạn.

Dưới đây là đoạn mã minh họa cho một Action:

// Định nghĩa một action kèm thông tin username và password

const setUser = (user) => {
return {
type: "LOGIN",
payload: {
username : user.name,
password : user.password
}
}
}

“Reducers” là pure function để cập nhật, thay đổi giá trị state được

lưu trong store. Các Reducers sẽ căn cứ vào action và payload được

truyền vào mà trả về state với giá trị mới.

Ví dụ một đoạn mã dưới đây cách Reducers cập nhật state lưu thông

tin đăng nhập (username và password).

VNTALKING.COM 137
// Reducer
const initialState = {
username: '',
password: ''
};
const loggeduser = (state = initialState, action) => {
switch (action.type) {
case "LOGIN":
return {
username : action.payload.username,
password : action.payload.password
};
default:
return state;
}
};

Ok, Lý thuyết về Redux cơ bản chỉ như vậy thôi, chúng ta cũng không

cần phài đào sâu quá làm gì, mình biết những cái cần thiết trước và

ứng dụng được trong dự án là được.

Phần tiếp theo, chúng ta cùng nhau thực hành một ví dụ nhỏ về cách

cài đặt, cấu hình để sử dụng Redux trong dự án React Native nhé.

Cài đặt và cấu hình Redux cho dự án

Để cài đặt Redux cho dự án React Native, chúng ta cũng thực hiện

giống như cài đặt một dependencies bình thường khác.

npm install redux

npm install react-redux

VNTALKING.COM 138
Sau khi cài đặt xong thì chúng ta tiến hành cấu hình cơ bản để Redux

hoạt động được với dự án. Bạn tải mã nguồn starter cho phần này về

rồi cùng mình thực hành nhé.

Tải mã nguồn trước khi thực hành

Hãy sử dụng mã nguồn này trước khi vào thực hành

Chuong9-Redux-Starter.zip

Trong ví dụ này, chúng ta sẽ tạo một ứng dụng tăng giảm biến đếm

và hiển thị ra ngoài màn hình. Ví dụ này đã được sử dụng trong

Chương 6 - phần State. Tuy nhiên, ở chương 6, chúng ta thực hiện lưu

state trực tiếp trong component. Đến chương này, chúng ta sẽ thử

dùng Redux để lưu và quản lý state trong store.

Hình ảnh ứng dụng sau khi hoàn thành:

VNTALKING.COM 139
Trước hết, chúng ta dựng lại giao diện ứng dụng giống như trên đã

nhé (bỏ qua xử lý logic).

screens/Home.js

import React, { useState } from 'react';

import { StyleSheet, View, Text, TouchableOpacity} from 'react-
native';

const Home = () => {

const handleIncreament = () => {
console.log("Tăng điểm")
};

const handleDecreament = () => {

console.log("Giảm điểm")
};
return (
<View style={{flex: 1}}>
<View style={{alignItems: 'center',
backgroundColor:"#cc3333"}}>
<Text style={styles.textHeader}>Giới thiệu sử dụng
Redux</Text>
<Text style={{color: "#FFFFFF"}}>VNTALKING.COM</Text>
</View>
<View style={styles.container}>
<Text style={styles.title_text}>Bộ đếm 2.0</Text>
<Text style={styles.counter_text}>0</Text>

<TouchableOpacity onPress={handleIncreament}
style={styles.btn}>
<Text style={styles.btn_text}> Tăng điểm </Text>
</TouchableOpacity>

<TouchableOpacity
onPress={handleDecreament}
style={{ ...styles.btn, backgroundColor: '#6e3b3b'
}}>
<Text style={styles.btn_text}> Giảm điểm </Text>
</TouchableOpacity>
</View>
</View>
)

VNTALKING.COM 140
}
const styles = StyleSheet.create({
textHeader: {
fontSize: 18,
fontWeight: "bold",
color: "#FFFFFF"
},
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
flexDirection: 'column',
padding: 50,
},
title_text: {
fontSize: 40,
fontWeight: '900',
marginBottom: 55,
},
counter_text: {
fontSize: 35,
fontWeight: '900',
margin: 15,
color: '#D64545'
},
btn: {
backgroundColor: '#086972',
padding: 10,
margin: 10,
borderRadius: 10,
},
btn_text: {
fontSize: 23,
color: '#fff',
},
})

export default Home;

Còn file App.js sẽ cấu hình để trỏ sang màn hình Home.

VNTALKING.COM 141
App.js

import Home from './screens/Home';

import React from 'react';

export default function App() {

return <Home />;
}

Bước tiếp theo, chúng ta sẽ định nghĩa các action tương ứng với hai

hành động khi nhấn nút “tăng điểm” và “giảm điểm”.

Để cho mã nguồn dự án nó gọn gàng, mình sẽ tạo thư mục

“redux” dành riêng cho toàn bộ code liên quan tới redux.

Tạo file countAction.js trong thư mục redux và định nghĩa action

tương ứng như sau:

redux/countAction.js

export const increment = () => {

return {
type: 'INCRESE',
};
};

export const decrement = () => {

return {
type: 'DECRESE',
};
};

Sau đó, chúng ta tạo countReducer.js (vẫn để trong thư mục redux)

VNTALKING.COM 142
redux/countReducer.js

const initialState = {
count: 0,
};

export default (state = initialState, action) => {

switch (action.type) {
case 'INCRESE':
return {
...state,
count: state.count + 1,
};
case 'DECRESE':
return {
...state,
count: state.count - 1,
};
default:
return state;
}
};

Đây là reducer dùng để cập nhật state lưu giữ trạng thái biến đếm,

với giá trị mặc định là 0, tức là mỗi lần mở ứng dụng, ứng dụng sẽ

hiển thị giá trị bắt đầu là số 0.

Bước tiếp theo, chúng ta tạo một store để lưu giữ state, cụ thể là

“count” state.

Tạo một file store.js trong thư mục redux:

redux/store.js

import { createStore, combineReducers} from 'redux';

import CountReducer from './countReducer';

const rootReducer = combineReducers({

VNTALKING.COM 143
 count: CountReducer,
});

export const store = createStore(rootReducer);

Gần xong rồi! Sau khi các món ăn đã chuẩn bị xong hết rồi, rượu

ngon cũng đã sẵn sàng, giờ là đi mời các bạn hiền tới nhậu thôi

Đùa thôi, (viết sách nhiều khi bị tẩu hỏa nhập ma, mong bạn thông

cảm!). Bước tiếp theo là chúng ta thực hiện kết nối store vừa tạo ở

trên tới ứng dụng.

Chúng ta quay trở lại file App.js và thay đổi code một chút:

App.js

import Home from './screens/Home';

import React from 'react';
import { Provider } from 'react-redux';
import { store } from './redux/store';

export default function App() {

return (
<Provider store={store}>
<Home />
</Provider>
);
}

Trong đoạn code trên, mình bọc toàn bộ màn hình ứng dụng vào

trong Provider.

VNTALKING.COM 144
Như vậy là đã kết nối xong rồi đấy. Giờ là lúc sử dụng thôi. Quay lại

màn hình Home, mình sẽ chỉnh sửa code một chút để nó lưu giá trị

vào store, sau đó lấy ra để hiển thị lên màn hình.

screens/Home.js

import React from 'react';

import { StyleSheet, View, Text, TouchableOpacity} from 'react-
native';

import { useSelector, useDispatch } from 'react-redux';

import { increment, decrement } from '../redux/countAction';

const Home = () => {

const dispatch = useDispatch();
const count = useSelector((store) => store.count.count);

const handleIncreament = () => {

console.log("Tăng điểm");
dispatch(increment());
};

const handleDecreament = () => {

console.log("Giảm điểm");
dispatch(decrement());
};
return (
<View style={{flex: 1}}>
<View style={{alignItems: 'center',
backgroundColor:"#cc3333"}}>
<Text style={styles.textHeader}>Giới thiệu sử dụng
Redux</Text>
<Text style={{color: "#FFFFFF"}}>VNTALKING.COM</Text>
</View>
<View style={styles.container}>
<Text style={styles.title_text}>Bộ đếm 2.0</Text>
<Text style={styles.counter_text}>{count}</Text>

<TouchableOpacity onPress={handleIncreament}
style={styles.btn}>
<Text style={styles.btn_text}> Tăng điểm </Text>
</TouchableOpacity>

VNTALKING.COM 145
 <TouchableOpacity
onPress={handleDecreament}
style={{ ...styles.btn, backgroundColor: '#6e3b3b'
}}>
<Text style={styles.btn_text}> Giảm điểm </Text>
</TouchableOpacity>
</View>
</View>
)
}

Ở đây, chúng ta sử dụng các hooks được cung cấp bởi thư viện react-

redux để gửi action và truy cập vào store. Cụ thể là hai hooks sau:

• useSelector: Giúp truy xuất vào store để lấy state.

• useDispatch: Giúp gửi action để kích hoạt thay đổi state

Các bạn chạy ứng dụng để tận hưởng thành quả nhé:

VNTALKING.COM 146
 Tải mã nguồn tham khảo

Hãy thực hành chạy thử với mã nguồn đầy đủ của phần này nhé

Chuong9-Redux-Counter-Final.zip

Tổng kết

Qua tìm hiểu lý thuyết và thực hành ví dụ trên, bạn thấy Redux này

thế nào? Việc quản lý State qua redux nó có ích lợi gì không?

Có thể bạn sẽ bật ra ngay ý nghĩ kiểu: Việc để state trong store tập

trung như này chả khác gì khi vừa nhận lương tháng, vội vàng cất vào

két sắt, xong lại vội vàng mở két lấy ra để đi uống bia cả. Thực tế thì

bạn nói cũng có ý đúng!

Quan điểm cá nhân: với những trường hợp state nào mà không cần

chia sẻ cho nhiều màn hình thì đúng là không cần phải quản lý tập

trung, gây phức tạp thêm tình hình. Tuy nhiên, nếu bạn là người ngăn

nắp, thích gọn gàng thì việc quản lý tập trung state về một mối cũng

có nhiều điểm lợi thế. Đặc biệt là khoản debug ứng dụng qua React

Dev Tools.

VNTALKING.COM 147