Tìm hiều về REDUX (Phần 2)
I.Giới thiệu về Redux
a) Giới thiệu về redux
Mô hình hoạt động của công ty bảo hiểm giúp giải thích một cách dễ dàng hơn cho hoạt động của REDUX.
- Ánh xạ hoạt động của công ty bảo hiểm sang hoạt động của REDUX
- (ActionCreate) Một hoạt động bên trong công ty bảo hiểm bắt đầu với một số khách hàng tạo form chứa một số lượng thông tin (bao gồm type + payload) mô tả cách họ muốn thay đổi dữ liệu bên trong công ty.
=> Người dùng tạo form cho FormReciver (Person dropping off the form) cũng có vai trò như ActionCreate (người tạo hành động) trong Redux.
=> Khi action được tạo ra sẽ trả về một javascript object chúng ta gọi nó là Action (hành động), hiểu đơn giản rằng Action Creator như một function sẽ trả về một Javascript Object vào Object này tham chiếu đến một Action.
=> Action giống như form, action ở đây cũng sẽ có type giống như form có type và payload, type nó mô tả những thay đổi mà chúng ta muốn làm bên trong dữ liệu ứng dụng còn payload mô tả một số bối cảnh xung quanh thay đổi mà chúng tôi muốn thực hiện.
- (Action) Hãy liên hệ sự giống nhau giữa Action(redux) và Form(trong công ty bảo hiểm), form có type và payload nó cho các phòng đưa ra quyết định có thay đổi dữ liệu hay không ? nếu thay đổi thì dựa vào payload để thay đổi, điều tương tự cũng như trong REDUX, mục đích của Action đơn giản là để mô tả một số thay đổi mà chúng tôi muốn thực hiện đối với dữ liệu.
=> Người tạo ra hành động(Action Creator) và Người tạo form đều có chung một mục đích => họ tạo ra hành động hay sự kiện nào đó.
-(Dispatch) Khi khách hàng tạo form, nó được trao cho FormReciever sau đó FormReciver tạo ra các bản sao để gửi cho từng phòng ban
=> hành động này liên hệ với REDUX_DISPATCH (chức năng điều phối trong redux) nó sẽ lấy Action vừa được tạo ra, sao chép ra các bản sao của action sau đó rồi chuyển nó đến một loạt các Node bên trong ứng dụng của chúng ta.
- (Reducers) Khi mỗi phòng ban nhận được form và dataList của FromReciver, mỗi phòng sẽ tiến hành xử lý dữ liệu đầu vào này
=>Vai trò của mỗi phòng ban cũng giống như REDUX_REDUCERS chịu trách nhiệm để thực hiện một hành động với một lượng dữ liệu hiện có (giống như các phòng ban nhìn vào dữ liệu đầu vào để đưa ra quyết định, Reducers sẽ làm điều tương tự nó sẽ có một cái nhìn về dữ liệu đầu vào) nó các thể thực hiện thay đổi dữ liệu và sau đó trả lại data để sau đó data này có thể tập trung ở vị trí khác (giống như phòng ban xử lý xong dữ liệu thì trả về cho AllDataDepartment)
- (State) Sau khi mỗi phòng ban đã xử lý xong dữ liệu đầu vào nó sẽ trả dữ liệu về cho AllDataDepartment =>Liên hệ sang REDUX_REDUCERS đã xử lý dữ liệu xong nó sẽ trả tất cả dữ liệu về State giống như phòng ban trả dữ liệu về cho AllDataDepartment vậy, tất cả thông tin được hợp nhất bên trong đối tượng State để ứng dụng hoạt động có thể dễ dàng truy cập vào tất cả dữ liệu.
=> Theo cách này action của chúng ta không cần phải đi lòng vòng liên tục mỗi lần các reducers thực hiện thay đổi data nữa mà dữ liệu được lưu trữ tập trung tại một điểm.
b) Chu kì của Redux
- Khi cần thay đổi State, chúng ta sẽ gọi một ActionCreate => Nó sẽ trả về một Action
- Action (object) mô tả chính xác làm thế nào để thay đổi được state
- Action sẽ được đưa vào dispatch và tạo ra các bản sao để gửi đến các Reducers.
- Reducers sẽ xử lý các action và dữ liệu đầu ra là các state có thể được thay đổi hoặc không.
- State (là một object) sẽ ngồi chờ đến khi nào state cần update thì lại lấy nó ra.
Ví dụ về Redux Cycle
1.Tạo Action
Như mình đã nói bên trên ActionCreate như một function trả về một object (Action)
Quan sát đoạn code trên có thể thấy mình có 3 hàm (3 ActionCreate), mỗi hàm mình trả về một object (chính là form) bao gồm type và payload, mỗi form có type khác nhau.
=> Mình tạo ra form cũng giống như user trên web tác động lên giao diện => tạo ra hành động, bản chất là tạo ra hành động nhằm thay đổi data, hành động user tạo ra có type và payload.
2.Tạo Reducers
=> Ý tưởng về Reducers là chúng ta tạo ra một vài function và mỗi function sẽ đại diện cho một phòng ban trong công ty, giống như REDUCERS_CLAIM sẽ mô tả là hành động của ClaimDepartmen...
+ Mỗi reducers sau đó sẽ kiểm tra action đầu vào giống như mỗi phòng ban kiểm tra form vậy, mục tiêu tổng thể của Reducers là lấy một số dữ liệu(dataList) hiện có và một Action sau đó đưa ra quyết định có thực hiện sửa đổi dataList hay không dựa vào tính chất của Action rồi trả về dataList sau khi sửa đổi.
3.Tạo redux
=> Mục đích của combineReducers là kết hợp các Reducers
=> Chỉ có thể sửa đổi các state bằng cách gọi các ActionCreate mà thôi.
Nhận xét
Đăng nhận xét