Phản ứng redux mysql

Trong bài viết này mình sẽ hướng dẫn xây dựng một ứng dụng ghi chú đơn giản sử dụng ReactJS và Redux. Đây cũng là một dự án nhỏ giúp làm quen với Redux

Bài viết này đã được đăng tại freetuts. net , không được sao chép dưới mọi hình thức.

Bạn cần chuẩn bị một vài kiến ​​thức về Redux trước khi bắt tay vào xây dựng ứng dụng bằng cách tham khảo bài viết về phân tích hợp tác Redux vào ReactJS

Ở đây ta sẽ xây dựng ứng dụng ghi chú đơn giản với chức năng bao gồm bổ sung, chỉnh sửa, xóa ghi chú, có cấu trúc thư mục

npm install redux react-redux --save

3 như sau

src/
....const/
        index.js
.....actions/
        index.js
....reducers/
        noteReducer.js
        index.js
----components/
       AddNote.css
       AddNote.js
       ShowNote.js
....App.js

Ngoài ra mình đang sử dụng thư viện Bootstrap 4 để xây dựng giao diện, hãy tham khảo thêm về Bootstrap 4 để có thể hiểu rõ hơn nhé

Bài viết này đã được đăng tại [free tuts. bọc lưới]

Giao diện của ứng dụng ghi chú

1. Cài đặt thư viện cần thiết

Trước tiên cần phải cài đặt redux cho dự án của mình bằng npm bằng lệnh

npm install redux react-redux --save

Để có thể xây dựng giao diện dễ dàng hơn ta sẽ sử dụng Bootstrap 4, tiến hành thêm thư viện bootstrap vào bên trong thẻ

npm install redux react-redux --save

4 của tệp

npm install redux react-redux --save

5

Bước tiếp theo phải phân tích xem dự án cần những chức năng gì, để từ đó xây dựng cấu trúc redux một cách hợp lý hơn. Đối với dự án này bao gồm 3 chức năng chính đó là bổ sung, chỉnh sửa, xóa ghi chú. Đồng nghĩa với đó là sẽ có 3 action, 1 reducers và 3 const,. chúng ta sẽ phát triển ở bên dưới

2. Redux triển khai

Chúng ta sẽ triển khai mô hình Redux với 3 thư mục đó là actions, reducers, const,. Với thư mục sẽ có chức năng riêng từng chức năng

Thư mục

npm install redux react-redux --save

6 sẽ chứa các hằng số hỗ trợ trong quá trình khai triển dự án. Ta will khai báo các hằng số trong tệp

npm install redux react-redux --save

7

________số 8

Thư mục

npm install redux react-redux --save

8 sẽ bao gồm các hàm chứa các hành động để thực hiện gửi tới các bộ giảm tốc. Ở đây chúng ta sẽ khai triển các hàm ở file

npm install redux react-redux --save

9

src/
....const/
        index.js
.....actions/
        index.js
....reducers/
        noteReducer.js
        index.js
----components/
       AddNote.css
       AddNote.js
       ShowNote.js
....App.js

1

Có 3 hàm được xuất ở file

npm install redux react-redux --save

9 đó là

1,

2, dùng actEditNote để tạo action cho chức năng bổ sung, sửa, xóa ghi chú

Thư mục

3 sẽ chứa các hàm chứa các bộ giảm tốc trong Redux, có 2 tệp đó là

• 4. bộ giảm tốc hỗ trợ thực thi hành động với ghi chú như bổ sung, chỉnh sửa, xóa. Ta có thể tạo nhiều bộ giảm tốc như thế này, và phần mở rộng của nó bằng phương thức
  5 trong redux

• 6. trong trường hợp có nhiều bộ giảm tốc thì tất cả các bộ giảm tốc ở đây

src/
....const/
        index.js
.....actions/
        index.js
....reducers/
        noteReducer.js
        index.js
----components/
       AddNote.css
       AddNote.js
       ShowNote.js
....App.js

9

npm install redux react-redux --save

0

To other component may be Tương tác với Store ta cần bọc thành phần gốc bởi

7. At file

8 will re edit as after

npm install redux react-redux --save

3

Vì vậy các bước cài đặt redux đã hoàn tất, tiếp theo sẽ là đi xây dựng các thành phần

3. Xây dựng giao diện ứng dụng ghi chú

Bây giờ sẽ đi xây dựng giao diện và kết nối với store redux trong mỗi thành phần. Ví dụ này sẽ có 2 thành phần bổ sung và hiển thị ghi chú (nằm trong thư mục

9)

Ở đây 2 thành phần

// const/index.js
export const ADD_NEW_NOTE = "ADD_NEW_NOTE";
export const REMOVE_NOTE = "REMOVE_NOTE";
export const EDIT_NOTE = "EDIT_NOTE";

0 và

// const/index.js
export const ADD_NEW_NOTE = "ADD_NEW_NOTE";
export const REMOVE_NOTE = "REMOVE_NOTE";
export const EDIT_NOTE = "EDIT_NOTE";

1 sẽ được hiển thị trong tệp

// const/index.js
export const ADD_NEW_NOTE = "ADD_NEW_NOTE";
export const REMOVE_NOTE = "REMOVE_NOTE";
export const EDIT_NOTE = "EDIT_NOTE";

2

npm install redux react-redux --save

8

Thành phần

// const/index.js
export const ADD_NEW_NOTE = "ADD_NEW_NOTE";
export const REMOVE_NOTE = "REMOVE_NOTE";
export const EDIT_NOTE = "EDIT_NOTE";

0 sẽ có chức năng bổ sung ghi chú mới, tệp

// const/index.js
export const ADD_NEW_NOTE = "ADD_NEW_NOTE";
export const REMOVE_NOTE = "REMOVE_NOTE";
export const EDIT_NOTE = "EDIT_NOTE";

4 sẽ có nội dung như sau

npm install redux react-redux --save

1

Thành phần

// const/index.js
export const ADD_NEW_NOTE = "ADD_NEW_NOTE";
export const REMOVE_NOTE = "REMOVE_NOTE";
export const EDIT_NOTE = "EDIT_NOTE";

1 sẽ nhận vào một đạo cụ là

// const/index.js
export const ADD_NEW_NOTE = "ADD_NEW_NOTE";
export const REMOVE_NOTE = "REMOVE_NOTE";
export const EDIT_NOTE = "EDIT_NOTE";

6 chứ không phải thuộc tính của từng ghi chú. Thành phần này sẽ có chức năng chỉnh sửa và xóa các ghi chú

npm install redux react-redux --save

0

Để giao diện của component

// const/index.js
export const ADD_NEW_NOTE = "ADD_NEW_NOTE";
export const REMOVE_NOTE = "REMOVE_NOTE";
export const EDIT_NOTE = "EDIT_NOTE";

1 đẹp hơn 1 chút, ta sẽ thêm một vài đoạn css vào file

// const/index.js
export const ADD_NEW_NOTE = "ADD_NEW_NOTE";
export const REMOVE_NOTE = "REMOVE_NOTE";
export const EDIT_NOTE = "EDIT_NOTE";

8

npm install redux react-redux --save

1

Đây cũng là bước cuối cùng để xây dựng ứng dụng ghi chú, để khởi động dự án chỉ cần mở terminal và nhập dòng lệnh

npm install redux react-redux --save

2

Trên đây là ví dụ về khởi tạo ứng dụng ghi chú sử dụng ReactJS và Redux, mong rằng ví dụ này sẽ giúp bạn có thể chắc chắn hơn về cách phát triển khai thác redux trong một dự án thực tế