Đồ án thực tập: Xây dựng Website bán đồ điện tử sử dụng công nghệ Reactjs
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.36 MB, 39 trang )
BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH
KHOA CÔNG NGHỆ THÔNG TIN
BÁO CÁO THỰC TẬP TỐT NGHIỆP
XÂY DỰNG WEBSITE BÁN ĐỒ ĐIỆN TỬ SỬ DỤNG CÔNG NGHỆ
REACTJS
Giảng viên hướng dẫn: VƯƠNG XUÂN CHÍ
Sinh viên thực hiện:
NGUYỄN HỮU DUY HÀO
MSSV:
1811545027
Chuyên ngành:
Kỹ Thuật Phần Mềm
Đơn vị thực tập:
Công ty cổ phần R2S
Khóa:
2018
TP.HCM, ngày 05
tháng 08
năm 2022
1
BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH
KHOA CÔNG NGHỆ THÔNG TIN
BÁO CÁO THỰC TẬP TỐT NGHIỆP
XÂY DỰNG WEBSITE BÁN ĐỒ ĐIỆN TỬ SỬ DỤNG CÔNG NGHỆ
REACTJS
Giảng viên hướng dẫn: VƯƠNG XUÂN CHÍ
Sinh viên thực hiện:
NGUYỄN HỮU DUY HÀO
MSSV:
1811545027
Chuyên ngành:
Kỹ Thuật Phần Mềm
Đơn vị thực tập:
Công ty cổ phần R2S
Khóa:
2018
TP.HCM, ngày 05
tháng 08
năm 2022
2
LỜI CẢM ƠN
Để hoàn thành chuyên đề báo cáo thực tập này trước hết em xin
gửi đến quý thầy,cô giáo trong khoa Công Nghệ Thông Tin trường Đại
học Nguyễn Tất Thành lời cảm ơn chân thành.
Em xin chân thành cảm ơn Ban Lãnh Đạo, các phịng ban của
Cơng ty cổ phần R2S đã tạo điều kiện thuận lợi cho em được trải
nghiệm thực tế trong suốt quá trình thực tập tại công ty.
Cuối cùng em xin cảm ơn các anh chị phịng CNTT của Cơng ty cổ
phần R2S đã giúp đỡ, tạo mơi trường thân thiện để em hồn thành tốt
chuyên đề thực tập tốt nghiệp này. Đồng thời đã cho em có cơ hội được
thưc tập nơi mà em yêu thích, cho em bước ra đời sống thực tế để áp
dụng những kiến thức mà các thầy cô giáo đã giảng dạy. Qua công việc
thực tập này em nhận ra nhiều điều mới mẻ và bổ ích để giúp ích cho
cơng việc sau này của bản thân.
Vì kiến thức bản thân cịn hạn chế, trong q trình thực tập, hồn
thiện chun đề này em khơng tránh khỏi những sai sót, kính mong
nhận được những ý kiến đóng góp từ thầy cũng như q cơng ty.
TP Hồ Chí Minh , Tháng 11, Năm 2021
Sinh viên thực hiện
3
LỜI MỞ ĐẦU
React.js là một thư viện javascript đang nổi lên trong những năm gần đây với xu
hướng Single Page Application. Trong khi những framework khác cố gắng hướng đến
một mơ hình MVC hồn thiện thì React nổi bật với sự đơn giản và dễ dàng phối hợp
với những Javascript khác. Nếu như AngularJS là một Framwork cho phép nhúng
code javascript trong code html thông qua các attribute như ng-model, ng-repeat… thì
với react cho phép nhúng code html trong code của javascript nhờ vào JSX bạn có thể
dễ dàng lồng các đoạn html vào trong JS. Tích hợp giữa javascript và html vào jsx làm
cho các component dễ hiểu hơn.
React là một thư viện UI do Facebook phát triển để hỗ trợ việc xây dụng những
thành phần (Components) UI có tính tương tác cao, có trạng thái và tái sử dụng lại
được. React được sử dụng tại Facebook trong production, và www.instagram.com
được viết hồn tồn trên React.
Có thể nói ReactJS là một công cự tuyệt vời giúp doanh nghiệp vượt qua đối thủ
cạnh tranh về mảng thiết kế các ứng dụng web.
-
Ứng dụng được tạo bởi ReactJS với cấu trúc UI tốt hơn giúp nâng cao và
tối ưu hóa UX. Các doanh nghiệp có thể dễ dàng tăng tương tác của người
dùng, tỷ lệ click và tỉ lệ chuyển đổi (conversion) trên trang web của mình
Hiệu suất kinh doanh khi có dùng ứng dụng của ReactJS cũng tốt hơn so
với khi dùng các framework khác. Nó sẽ hạn chế cập nhật của DOM, từ
đó tăng tốc độ truy cập ứng dụng và cải tiến UX tốt hơn.
ReactJS cũng được thiết kế đế giúp cải thiện số trang render tổng từ phía
server. Đồng thời sẽ giúp tối ưu các nút để render phía client-side. Khả
năng tùy chỉnh cơng cụ tốt, thậm chí làm giảm ngân sách bảo trì hệ thống,
giúp ReactJS hiệu quả cao hơn.
Sau những năm học tập trên trường, do mong muốn được đi trải nghiệm thực tế để
học hỏi thêm kiến thức và tìm hiểu nơi làm việc trong môi trường chuyên nghiệp nên
em đã và đang thực tập tại công ty cổ phần R2S nơi mà sẽ giúp em có những hành
trang tốt hơn khi em tốt nghiệp
4
NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
TPHCM, Ngày …… tháng …… năm 2022
Giáo viên hướng dẫn
(Ký tên, đóng dấu)
Vương Xuân Chí
5
NHẬN XÉT CỦA CƠ QUAN THỰC TẬP
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
TPHCM, Ngày …… tháng …… năm 2022
Xác nhận của đơn vị thực tập
(Ký tên, đóng dấu)
6
MỤC LỤC
LỜI CẢM ƠN.............................................................................................................3
LỜI MỞ ĐẦU.............................................................................................................4
NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN.....................................................5
NHẬN XÉT CỦA CƠ QUAN THỰC TẬP...............................................................6
PHIẾU NHẬN XÉT SINH VIÊN THỰC TẬP........................................................9
DANH MỤC CÁC BẢNG BIỂU.............................................................................11
DANH MỤC CHỮ VIẾT TẮT................................................................................12
NHẬT KÝ THỰC TẬP TỐT NGHIỆP..................................................................13
CHƯƠNG I: TỔ CHỨC HÀNH CHÍNH, NHÂN SỰ NƠI THỰC TẬP.............15
1.1 Giới thiệu về tổ chức của cơng ty............................................................15
1.2 Mơ hình tổ chức của cơng ty...................................................................15
Sơ đồ mơ hình tổ chức............................................................................15
Chức năng, nhiệm vụ của giám đốc.......................................................16
Chức năng nhiệm vụ của các phòng ban...............................................16
CHƯƠNG II: CÁC CÔNG NGHỆ, CÔNG CỤ SỬ DỤNG..................................18
2.1 React.........................................................................................................18
Giới thiệu ReactJS..................................................................................18
Cách thức hoạt động...............................................................................19
Đánh giá chung ReactJS.........................................................................19
Một số ứng dụng mẫu.............................................................................21
2.2 Redux saga................................................................................................24
Giới thiệu Redux.....................................................................................24
Cách thức hoạt đông...............................................................................24
2.3 Figma........................................................................................................27
Giới thiệu về Figma.................................................................................27
7
Những ưu điểm nổi bật của Figma........................................................28
CHƯƠNG III: CÁC HOẠT ĐỘNG CHUYÊN NGÀNH VÀ MÔI TRƯỜNG
LÀM VIỆC CƠ QUAN NƠI THỰC TẬP..............................................................31
2.1 Các hỗ trợ.................................................................................................31
2.2 Cơ sở hạ tầng............................................................................................31
2.3 Khách hàng...............................................................................................31
CHƯƠNG IV: THỰC NGHIỆM............................................................................32
3.1 Nhiệm vụ được giao.................................................................................32
3.2 Phương pháp thực hiện...........................................................................32
3.3 Kết quả đạt được qua đợt thực tập.........................................................32
Những nội dung kiến thức lý thuyết nào đã được củng cố...................33
Những kỹ năng thực hành nào đã học hỏi được...................................33
Những kinh nghiệm thực tiễn nào đã tích luỹ được.............................33
Chi tiết các kết quả cơng việc mà mình đã đóng góp cho cơ quan nơi thực
tập......................................................................................................39
8
9
DANH MỤC CÁC BẢNG BIỂU
DANH MỤC CHỮ VIẾT TẮT
11
NHẬT KÝ THỰC TẬP TỐT NGHIỆP
Tuần
Tự nhận xét
Nội dung công việc được giao về mức độ
hoàn thành
1
Từ ngày
21/03/2022
đến ngày
26/03/2022
2
Từ ngày
28/03/2022
đến ngày
02/04/2022
Tìm hiểu và tự học về ngơn ngữ
ReactJS
Hồn thành
Dựng UI của trang Web dựa
trên trang thiết kế của zingnews
Hoàn thành
3
Từ ngày
04/04/2022
đến ngày
09/04/2022
4
Từ ngày
11/04/2022
đến ngày
16/04/2022
5
Từ ngày
18/04/2022
đến ngày
23/04/2022
6
Từ ngày
25/04/2022
đến ngày
30/04/2022
Tìm hiểu về Reac Boostrap
Hoàn thành
Nhận xét của Chữ ký của
CB hướng dẫn
CB HD
Dựng Demo home page cho ứng Hồn thành
dụng web
Tìm hiểu sử dụng sourcetree &
ứng dụng Figma ,tiếp tục dựng
home page
Hoàn thành
Dựng Responsive cho các trang
và hoàn thành 1 trang web
Hoàn thành
12
Tuần
7
Từ ngày
02/05/2022
đến ngày
07/05/2022
8
Từ ngày
09/05/2022
đến ngày
14/05/2022
Tự nhận xét
Nội dung công việc được giao về mức độ
hoàn thành
Nhận xét của Chữ ký của
CB hướng dẫn
CB HD
Tìm hiểu về React Dom và react Hồn thành
Router
Tìm hiểu về React core và Life Hồn thành
Cycle
13
CHƯƠNG I: TỔ CHỨC HÀNH CHÍNH, NHÂN SỰ
NƠI THỰC TẬP
1.1 Giới thiệu về tổ chức của công ty
Công ty cổ phần R2S đã xây dựng 1 hệ thống quản lý chặt chẽ, hợp lý. Các phịng
ban được có những chức năng riêng, có mối quan hệ hỗ trợ, phối hợp đồng bộ tạo nên sức
mạnh tập thể và đảm bảo thực hiện đúng tiến độ, thời gian hoàn thành, chất lượng dịch vụ
website và App một cách toàn diện, chu đáo nhằm duy trì mọi hoạt động của cơng ty một
cách có hiệu quả nhất.
Mơ hình tổ chức của tổng cơng ty được thể hiện như hình bên dưới.
Ban giám đốc
Chịu trách nhiệm điều hành mọi hoạt động của công ty, xác định mục tiêu, kế
hoạch của công ty.
Phân công và giám sát cơng việc các phịng ban.
Nghiên cứu những cơng nghệ mới và ứng dụng.
Các phịng ban của cơng ty bao gồm
Phịng truyền thơng
Phịng IT
Phịng quản lí, nhân sự
1.2 Mơ hình tổ chức của cơng ty
Sơ đồ mơ hình tổ chức
Cơ cấu tổ chức của công ty được thể hiện như hình vẽ bên dưới:
14
Chức năng, nhiệm vụ của giám đốc
Phụ trách chung, chịu trách nhiệm trước công ty về kết quả hoạt động sản xuất
kinh doanh và toàn bộ các lĩnh vực quản lý của cơng ty
Quan hệ với chính quyền địa phương, các doanh nghiệp trên địa bàn đơn vị, phối
hợp thực hiện các nhiệm vụ.
Trực tiếp chỉ đạo phịng quản lí, nhân sự, văn phòng, tổng hợp.
Chức năng nhiệm vụ của các phịng ban
Phịng quản lí, nhân sự
Quản lý điều hành sử dụng các nguồn lực lao động để thực hiện các nhiệm vụ sản
xuất kinh doanh và các nhiệm vụ khác của cơng ty.
Tổ chức quản lý hành chính: quản lý hành chính pháp luật, thực hiện cơng tác
đảng, đồn thể cơng tác chính trị tại chi nhánh, xây dựng chi nhánh thành đơn vị vững
mạnh tồn diện có nề nếp tác phong làm việc chính quy, quản lý kỷ luật, hoàn thành mọi
nhiệm vụ được giao.
Thay mặt giám đốc công ty quan hệ ngoại giao với các cơ quan, chính quyền địa
phương.
Quản lý theo dõi chấm cơng, trực nghỉ cán bộ công nhân viên, phân phối quản lý
tiền lương và thu nhập, tổ chức tuyển dụng.
15
Phối hợp với các phòng ban chức năng tổng hợp các nội dung, số liệu báo cáo,
soạn thảo các chương trình để giám đốc làm việc, đơn đốc thực hiện các công tác sinh
hoạt tổ chức, theo dõi quản lý an ninh, kiểm tra vật tư, vệ sinh trong chi nhánh, quản lý
thanh tốn các chi phí thường xun văn phịng, tổ chức thực hiện cơng tác hậu cần.
Phịng truyền thông
Phụ trách lên ý tưởng cho các clip trên mạng xã hội để quảng bá sản phẩm đên mọi
người.
Phòng CNTT
Thiết kế, lên ý tưởng, xây dựng giao diện cho các app, web của công ty. Hỗ trợ
hướng dẫn sử dụng các chức năng của app, web cho mọi người.
Hộ trợ bảo trì hệ thống app, web của cơng ty.
16
CHƯƠNG II: CÁC CÔNG NGHỆ, CÔNG CỤ SỬ
DỤNG
2.1 React
Giới thiệu ReactJS
Logo ngôn ngữ React Native
React là một thư viện JavaScript nhằm đơn giản hóa việc phát triển giao diện
người dùng.
Được phát triển bởi Facebook và bản release đầu tiên trên thế giới vào nằm
2013 và được sử dụng để viết ra Facebook, instagram và được sự ủng hộ sử
dụng của rất nhiều công ty khác trên thế giới.
Mục tiêu của react chính là đơn giản để phát triển. Tất cả trạng thái đều được
tập trung tại một thời điểm, bằng cách chia giao diện người dùng thành tập hợp
các thành phần (components)
React được sử dụng để xây dựng single-page web applications.
17
Minh họa React Native và mối liên kết ứng dụng
Cách thức hoạt động
Với React, bạn hồn tồn có thể viết code HTML bằng Javascript. Đây là một ví dụ đơn giản
nhất của React, hiển thị tiêu đề với dòng chữ “Hello, world!”
Khơng giống như những DOM element của trình duyệt, React element là những “plain object”
(đối tượng đơn giản). React DOM giữ vai trò cập nhật DOM để phù hợp với các React element.
Đánh giá chung ReactJS
Ưu điểm:
Dễ tiếp cận, React là thư viện khá dễ tiếp cận và sử dụng đối với những lập trình
viên mới bắt đầu học, thậm chí bạn có thể sử dụng React chỉ trong vài ngày học
theo tuturial và đọc các tài liệu liên quan. Trong mơ hình MVC (Model-Viewcontrol) thì React đảm nhận nhiệm vụ ‘V’ (View). Nó hoạt động bằng cách kết
hợp HTML và Javascript thuần, vì thế cú pháp trong React khá là dễ hiểu .
Tăng tốc độ tải trang với Virtual DOM Việc sử dụng Real DOM cấu trúc dạng
tree với kích thước lớn, khi thay đổi gía trị, cây DOM được cập nhật lại toàn bộ
18
gây tốn thời gian và rủi ro.Để giải quyêt vấn đề trên, React sử dụng Virual DOM
(DOM ảo), mỗi khi render thì React sẽ tạo ra một DOM ảo và lưu nó vào trong bộ
nhớ, khi thay đổi state của component thì DOM ảo sẽ được cập nhật lại và so sách
với DOM ảo cũ (được đồng bộ với DOM thật trước đó) bằng thuật tốn ‘diffing‘,
để tìm ra những node cần thay đổi và cuối cùng cập nhật lại những node đó trên
DOM thật.
Tái sử dụng dễ dàng với các Components React giúp lập trình viên hồn tồn có
thể sử dụng lại các component đã khai báo trước đó để phát triển các ứng dụng
khác nhau có cùng chứ năng. Đây là một điểm mạnh cũng như lợi thế của ReactJS
giúp các lập trình viên có thể dễ thở hơn trong các dự án.
Viết các Components dễ dàng với JSX Khi nhắc đến React ta không thể bỏ qua
JSX (Javascript + XML), đây là cú pháp mở rộng gần giống XML, người dùng có
thể lập trình React bằng cú pháp của XML thay vì sử dụng Javascript mà khơng
làm thay đổi ý nghĩa của Javascript, nó giúp chúng ta dễ dàng định nghĩa và quản
lý các component phức tạp cũng như việc dễ dàng đọc hiểu được ý nghĩa của các
component hơn.
Thân thiện với SEO một vai trò quan trọng trong tối ưu SEO là tốc độ tải trang.
React có thể tăng tốc dộ tải trang của ứng dụng thơng qua Virtual DOM, nên rất
có hiệu quả với việc cải thiện kết quả SEO.
Dễ tích hợp và kiểm thử, React chỉ là một thư viện giúp tạo ra giao diện người
dùng (View) nên có thể dễ dàng tích hợp vào các framework khác như Angular,
BackbooneJS…React được thiết kế với việc tạo ra các component riêng lẻ, nên
việc kiểm thử UI, chức năng cũng được đơn giản hóa theo từng component. Bằng
cách tích hợp các thư viện kiểm thử như Jest, Enzyme, React Testing Library …
sẽ giúp cho việc kiểm thử dễ dàng hơn.
19
Minh họa giả lập ứng dụng React Native
Nhược điểm
Reactjs chỉ phục vụ cho tầng View. React chỉ là View Library nó khơng phải là
một MVC framework như những framework khác. Đây chỉ là thư viện của
Facebook giúp render ra phần view. Vì thế React sẽ khơng có phần Model và
Controller, mà phải kết hợp với các thư viện khác. React cũng sẽ khơng có 2-way
binding hay là Ajax.
Tích hợp Reactjs vào các framework MVC truyền thống yêu cầu cần phải cấu
hình lại.
React khá nặng nếu so với các framework khác React có kích thước tương tương
với Angular (Khoảng 35kb so với 39kb của Angular). Trong khi đó Angular là một
framework hồn chỉnh.
Khó tiếp cận cho người mới học Web.
Một số ứng dụng mẫu
Đối với các lập trình viên mới tìm hiểu ngơn ngữ, chúng ta có thể sử dụng một số
các ứng dụng mẫu để nghiên cứu cách thiết kế, vận hành và cách tổ chức các tập tin trong
dự án.
Portfolio làm cv cho bản thân để nhiều ngừi biết tới khi làm freelance React
Website bán hàng như Lazada hay shopee
20
Làm trang quản lý cửa hàng
Adminwebsit Một trang web về trang quản lý của hàng hay page nhỏ
Ví dụ về React Props Work
React Props Work bằng ReactJS codepen.io
Ví dụ cách viết và trình bày để thiết lập
HTML
<div id="root"></div>
CSS
21
body {
height: 100vh;
margin: 0;
display: grid;
place-items: center;
max-width: 250px;
margin: 0 auto;
}
.box {
width: 300px;
&.dark-mode {
background: black;
color: #bbb;
h1 {
color: white;
}
.checkbox:hover {
color: white;
}
}
}
JS
// This is how a function component takes props.
const Module = props => (
<div className={`box ${props.darkMode}`}>
{props.title}
{props.content}
</div>
);
// This Class component also can have props
class App extends React.Component {
render() {
return <div>
{this.props.header}
darkMode="false"
22
title="Light"
content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua."
/>
title="Dark"
content="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur."
/>
</div>;
}
}
ReactDOM.render(<App header="Hello, World!"/>, document.getElementById("root"));
Minh họa mã nguồn
2.2 Redux saga
Giới thiệu Redux
Redux-Saga là một thư viện redux middleware, giúp quản lý những side effect trong ứng
dụng redux trở nên đơn giản hơn. Bằng việc sử dụng tối đa tính
năng Generators (function*) của ES6, nó cho phép ta viết async code nhìn giống như là
synchronos.
Saga khơng chỉ tồn tại trong thế giới javascript, nó cịn được coi là 1 pattern. Bạn có thể
xem qua về saga pattern bằng clip này: />Một cách nhìn nhanh chóng thì Saga pattern là cách để quản lý những long transaction
với những side effect hoặc các nguy cơ tiềm ẩn. Với mỗi transaction thành cơng, chúng ta
đều cần có counter-transaction để revert transaction đó về trạng thái ban đầu nếu gặp trục
trặc. Tham khảo thêm về saga pattern với bài viết của Roman Liutikov : Confusion about
Saga pattern
Cách thức hoạt đông
Đối với logic của saga, ta cung cấp một hàm cho saga, chính hàm này là hàm đứng ra
xem xét các action trước khi vào store, nếu là action quan tâm thì nó sẽ thực thi hàm sẽ
được thực thi, nếu bạn biết khái niệm hook thì hàm cung cấp cho saga chính là hàm hook.
Điều đặc biệt của hàm hook này nó là một generator function, trong generator function
này có yield và mỗi khi yield ta sẽ trả về một plain object. Object trả về đó được gọi
23
Effect object. effect object này đơn giản chỉ là một object bình thường nhưng chứa thơng
tin đặc biệt dùng để chỉ dẫn middleware của Redux thực thi các hoạt động khác ví dụ như
gọi một hàm async khác hay put một action tới store. Để tạo ra effect object đề cập ở trên
thì ta gọi hàm từ thư viện của saga là redux-saga/effects.
Minh họa sơ đồ thành phần truyền dữ liệu
So sánh saga và thunk:
redux-thunk
import {
API_BUTTON_CLICK,
API_BUTTON_CLICK_SUCCESS,
API_BUTTON_CLICK_ERROR,
} from './actions/consts';
import { getDataFromAPI } from './api';
const getDataStarted = () => ({ type: API_BUTTON_CLICK });
const getDataSuccess = data => ({ type: API_BUTTON_CLICK_SUCCESS, payload:
data })
const getDataError = message => ({ type: API_BUTTON_CLICK_ERROR. payload:
message });
const getDataFromAPI = () => {
24
return dispatch => {
dispatch(getDataStarted());
getDataFromAPI()
.then(data => {
dispatch(getUserSuccess(data));
}).fail(err => {
dispatch(getDataError(err.message));
})
};
};
Ở đây ta có một action creator getDataFromAPI() bắt đầu async progress như sau:
Đầu tiên bắn ra action cho phép store biết rằng chuẩn bị 1 API request
( dispatch(getDataStarted())
Tiếp theo thực hiện API request trả về một Promise
Cuối cùng bắn ra success action nếu request thành cơng hoặc error action nếu có lỗi
2. redux-saga
import { call, put, takeEvery } from 'redux-saga/effects';
import {
API_BUTTON_CLICK,
API_BUTTON_CLICK_SUCCESS,
API_BUTTON_CLICK_ERROR,
} from './actions/consts';
import { getDataFromAPI } from './api';
export function* apiSideEffect(action) {
try {
const data = yield call(getDataFromAPI);
yield put({ type: API_BUTTON_CLICK_SUCCESS, payload: data });
} catch (e) {
yield put({ type: API_BUTTON_CLICK_ERROR, payload: e.message });
}
}
// the 'watcher' - on every 'API_BUTTON_CLICK' action, run our side effect
export function* apiSaga() {
yield takeEvery(API_BUTTON_CLICK, apiSideEffect);
}
Cùng một process, nhưng cách implement khác nhau hoàn toàn.
put thay cho dispatch
25
