REDUCER LÀ GÌ

admin - 15/04/2022 89

Redux cho tất cả những người mới bước đầu - Part 1 Introduction

Báo cáo

Bài đăng này dường như không được cập nhật trong 4 năm

Đầu tiên là The Action Creators. Anh ta giữ nhiệm vụ tạo ra các Action, là bước thứ nhất vào luồng nhưng các chuyển đổi và shop hầu hết đi qua. Bất cứ lúc nào trạng thái của phầm mềm tuyệt là render của view biến hóa thì thứ nhất là một hành động sẽ được tạo ra.

Bạn đang xem: Reducer là gì

Hãy hình dung anh này như một anh chàng tiến công thiết bị, anh ta biết bạn phải truyền đạt điều gì với rất cần được tấn công ra văn uống bản theo định hình nào mang đến phần nhiều fan đa số phát âm được.

The Action Creator tạo thành một action là formated object chứa type với thông tin của action đó. Type thường vẫn là một trong những hằng số được quan niệm trước, kiểu nhỏng INCREASE giỏi DECREASE.

The Store

Tiếp theo là The Store. Hãy tưởng tượng đó là ông sếp đầy quyền lực, toàn bộ những làm việc với State tree (getState, updateState, registerListener...) hầu như bởi vì ông này cai quản.

Cái ông này làm cho những vấn đề thất thoát (?) Không thực chất ông ấy chỉ quản lý tinh thần của State tree thôi. lúc cảm nhận Action ông ấy đang đi hỏi The reducers coi State đã thay đổi ra sao chứ không hề trường đoản cú có tác dụng.

Nếu sẽ biết qua Flux thì hẳn là các bạn nhận thấy ông này dìm trực tiếp Action nhưng ko thông qua Dispatcher. Đó là chính vì trong Redux, dựa vào chào đón tư tưởng của Functional Programming, ông sếp này từ bỏ biết cách gọi Action và tự điều phối nó (dispatch()), phải không đề xuất thuê thêm anh Dispatcher.

The Reducers

Tiếp theo là The Reducers. Khi The Store hy vọng biết State biến hóa thế nào, ông ấy đã Hotline mang lại The Reducers. Ở phía trên gồm một ông là Root Reducer nữa, ông này sẽ chịu trách rưới nhiệm cắt ra State nên biến hóa dựa vào keys mà lại The Store gửi cho với gửi nó mang đến Reducer biết cách xử trí.

Hãy hình dung đấy là một tổ các tkhô hanh niên cuồng Photocopy (yaoming). Họ không đam mê làm rối tung hầu hết đồ vật chúng ta được chuyển mang lại, phải chúng ta tạo thành bạn dạng sao của bọn chúng cùng tiến hành đổi khác trên bản sao đó.

Đây là một trong những ý tưởng phát minh đặc trưng của Redux. State ko được thao tác làm việc trực tiếp. Thay vào kia, từng phần được xào nấu cùng kế tiếp toàn bộ các phần được kết hợp thành một đối tượng người tiêu dùng tâm trạng mới.

Các reducer gửi bạn dạng sao của chúng đến root reducer, cùng root reducer đã ghxay những bản sao với nhau nhằm sản xuất State mới. Sau đó, root reducer sẽ gửi các State new trở lại Store với Store đã sử dụng nó nlỗi State bằng lòng bắt đầu.

Nếu ta bao gồm một ứng dụng nhỏ dại, ta chỉ rất có thể bao gồm một reducer khiến cho một phiên bản sao của tổng thể State cùng với biến đổi nó. Hoặc nếu ta có một ứng dụng béo, ta có thể tất cả một Cây Reducers (Tree of Reducers) . Đây là một trong những sự biệt lập giữa Flux với Redux. Trong Flux, những Store ko nhất thiết cần liên kết cùng nhau cùng tất cả một cấu trúc phẳng. Trong Redux, Reducers là 1 trong những hệ thống level, hệ thống level này rất có thể có rất nhiều mức độ quan trọng, y hệt như những hệ thống cấp độ component.

The views: smart & dumb components

Trong Redux gồm 2 khái khái niệm: smart and dumb components.

Smart component: hoàn toàn có thể Gọi là containersHãy hình dung đây là anh thống trị của nhóm nhỏ, anh ta phụ trách những kích hoạt. Khi các thành viên bên dưới anh ta (dumb components) buộc phải phân phát 1 action, anh ta sẽ gửi action cho những member bên dưới dạng props, các member chỉ cần coi chính là những callbachồng nhưng không quan tâm nó là cái gì.Anh ta không say đắm ăn mặc (không có css).lúc gồm vấn đề bắt buộc biến đổi (DOM) thì anh ta đã thu xếp những member bên dưới làm chứ thi thoảng Khi từ có tác dụng.Dumb components: hoàn toàn có thể gọi là componentsHãy tưởng tượng đó là mấy tkhô cứng niên học tập việc, thiên lôi chỉ đâu đánh đấy.Mấy tkhô nóng niên này không dựa vào trực tiếp vào các Action, bởi vì được anh cai quản chuyển mang đến rồi. Điều này có nghĩa là mấy tkhô hanh niên này rất có thể chuyển thanh lịch phần tử không giống có tác dụng cũng đc, miễn sao có anh thống trị chuyển "hàng" mang đến xài.Mấy thanh niên này thì đẹp mắt trai, tóc tai vuốt vuốt các máy (bao gồm css riêng), nhưng lại đôi khi bị cấp bên trên bắt mang theo ý sếp (nhấn props style) thì vẫn phải chịu.

Xem thêm: Next Post Tiêu Điểm Tướng Fiora Champion Spotlight, Cách Khắc Chế Fiora Trong Lmht Mới Hiệu Quả

The view layer binding

Để The Store giao tiếp đc với The views, họ nên một ai đó kết nối họ lại cùng nhau, với chúng ta có The view layer binding, với React anh ta tên là react-redux.

Hãy tưởng tượng anh này là nhân viên IT chịu trách nát nhiệm bảo đảm an toàn mạng vào cửa hàng nối tiếp nhằm các components kết nối được cùng với Store. Đồng thời cũng thống trị một lô biết tin nghệ thuật mà lại trong vnạp năng lượng phòng chả ai đọc (yaoming)

The view layer binding cung ứng 3 khái niệm:

The Provider component: là nhân tố phủ quanh components tree. Giúp các components nhỏ liên kết với Store dễ dãi trải qua connect()connect() : là function cung ứng vì The view layer binding nhỏng react-redux. Nếu một component mong muốn nhận được update State, nó nên tự bao lại bằng connect(). Sau kia, connect function vẫn thiết lập toàn bộ những hệ thống liên kết mang lại nó, bằng phương pháp sử dụng selectorselector : Đây là function mà các bạn viết. Nó chứng thực phần nào của State cơ mà component đề xuất nlỗi properties.

The root component

Cuối thuộc là The root component. Tất cả những React phầm mềm đều sở hữu The root component. Là phần đông component cao nhất của hệ thống component. Ở Redux thì nó phụ trách những trách nhiệm hơn.

Hãy hình dung đó là một người đứng đầu C-màn chơi (CEO, COO....). Ông người đứng đầu này sẽ tạo ra The Store với chỉ định và hướng dẫn The Reducers nào được thực hiện, tập hợp The view layer binding cùng rất The views.

Sau Khi chỉ định và hướng dẫn cùng tập đúng theo những thành phần trong team, người đứng đầu của chúng ta vẫn làm cho những bộ phận dưới trường đoản cú hoạt động.

Phối hận đúng theo giữa những nhân thiết bị kể trên

Qua không còn những nhân đồ vật rồi, giờ cùng coi bọn họ xúc tiến với nhau như thế nào để giải quyết và xử lý công việc

Setup

Các bộ phận rất cần phải nối cùng nhau. Việc này xảy ra lần nguồn vào app.

1. Bảo ông Store sẵn sàng: ông người đứng đầu Root component tạo nên Store, chỉ cho ông Store dùng Root Reducer nào trải qua createStore(). Ông Root Reducer thì đã bao gồm team sẵn rồi, được tập hòa hợp lại thông qua combineReducers()

2. Chuẩn bị liên hệ giữa ông Store và các phần tử khác.

Root component bao những subcomponents với provider component (The view layer binding) cùng chế tạo ra kết nối giữa Store với các Provider.

Provider tạo thành 1 mạng cơ bạn dạng nhằm update những components. Smart Components kết nối vào mạng bằng connect(), điều này bảo đảm an toàn họ cảm nhận cập nhật State.

3. Chuẩn bị những actions callback

Để những Dump Components làm việc với Action thuận tiện rộng, các Smart Components hoàn toàn có thể sẵn sàng những action callbachồng thông qua bindActionCreators(). Bằng biện pháp này, họ chỉ tất cả đề nghị truyền các callbaông xã cho Dump Components. Các Actions sẽ tiến hành auto gửi đi sau khi nó được định dạng.

Flow

Sau phần cài đặt thì web app vẫn chuẩn bị sẵn sàng nhận input đầu vào từ bỏ người tiêu dùng. Khi này trigger một action bằng cách nhằm người tiêu dùng tạo ra một sự đổi khác.

Kết

Vậy là họ đang mày mò được đầy đủ tư tưởng cơ bạn dạng thứ nhất của Redux nlỗi nguyên tắc, kết cấu, và data flow.

Xem thêm: Vi Mùa 11: Bảng Ngọc Bổ Trợ, Cách Lên Đồ Vi, Hướng Dẫn Cách Chơi Vi Mùa 11

Thông qua phần 1 này hy vọng gần như fan hình dung được những yếu tố trong 1 phầm mềm sử dụng Redux. Để phát âm kĩ rộng về phong thái thực hiện Redux, hẹn phần lớn fan tại vị trí sau Project đầu tiên. (Bài này mang ý nghĩa hóa học nói điêu cùng thả thính là bao gồm (yaoming))

Và hãy ghi nhớ phần nhiều nhân đồ dùng của bọn họ, nhằm còn gặp mặt trực tiếp họ vào phần sau.