Giới thiệu
Nói công cộng Redux khá là phổ cập. Tuy nhiên, ko cần toàn bộ tất cả chúng ta đều đã biết nó là gì và cơ hội dùng nó rời khỏi sao. Trong bài bác này, tất cả chúng ta tiếp tục coi vài ba nguyên nhân tại vì sao nên dùng redux bằng phương pháp phân tách những quyền lợi tuy nhiên nó đưa đến và cơ hội hoạt động và sinh hoạt của chính nó.
Redux là 1 trong những predictable state management tool cho những phần mềm Javascript. Nó giúp đỡ bạn viết lách những phần mềm hoạt động và sinh hoạt một cơ hội nhất quán, chạy trong những môi trường thiên nhiên không giống nhau (client, server, and native) và đơn giản và dễ dàng nhằm test. Redux thành lập và hoạt động lấy hứng thú kể từ tư tưởng của ngôn ngữ Elm và con kiến trúc Flux của Facebook. Do vậy Redux thông thường người sử dụng kết phù hợp với React.
Bạn đang xem: redux là gì
Lý vì thế thành lập và hoạt động Redux
Do đòi hỏi cho những phần mềm single-page dùng Javascript càng ngày càng trở lên trên phức tạp thì code của tất cả chúng ta cần vận hành nhiều state rộng lớn.
State hoàn toàn có thể bao hàm là data trả về kể từ phía Server và được cached lại hay như là tài liệu được dẫn đến và thao tác ở phía client tuy nhiên không được đưa lên phía server. UI state cũng trở lên trên phức tạp vì như thế tất cả chúng ta cần thiết vận hành việc active Routes, selected tabs, spinners, tinh chỉnh và điều khiển phân trang …vv.
Với Redux, state của phần mềm được lưu giữ nhập một điểm gọi là store và mỗi componentđều hoàn toàn có thể access ngẫu nhiên state này tuy nhiên bọn chúng ham muốn kể từ bọn chúng store này.
Hầu không còn những lib như React, Angular, etc được built theo đuổi một cơ hội sao cho những components cho tới việc vận hành nội cỗ những state của bọn chúng tuy nhiên ko cần thiết ngẫu nhiên một tủ sách or tool này kể từ phía bên ngoài.
Nó tiếp tục hoạt động và sinh hoạt chất lượng với những phần mềm sở hữu không nhiều components tuy nhiên khi phần mềm trở lên trên to hơn thì việc vận hành states được share qua quýt những components tiếp tục trở thành những việc làm lặt nhặt.
Trong một ứng dụng điểm data được share trải qua những components, rất đơn giản lầm lẫn nhằm tất cả chúng ta hoàn toàn có thể thực sự biết điểm tuy nhiên một state đang được live. Một sự hoàn hảo là data nhập một component nên live nhập duy nhất component. Vì vậy việc share data trải qua những components bạn bè tiếp tục trở thành trở ngại rộng lớn.
Ví dụ, nhập react nhằm share data trải qua những components bạn bè, một state cần live nhập component phụ thân. Một method nhằm update chủ yếu state này sẽ tiến hành hỗ trợ vì chưng chủ yếu component phụ thân này và pass như props cho tới những components con cái.
Đây là 1 trong những ví dụ:
class App extends React.Component {
constructor(props) {
super(props);
this.state = { userStatus: "NOT LOGGED IN"}
this.setStatus = this.setStatus.bind(this);
}
setStatus(username, password) {
const newUsers = users;
newUsers.map(user => {
if (user.username == username && user.password === password) {
this.setState({
userStatus: "LOGGED IN"
})
}
});
}
render() {
return (
<div>
<Status status={this.state.userStatus} />
<Login handleSubmit={this.setStatus} />
</div>
);
}
});
Giờ tất cả chúng ta hãy tưởng tượng rằng nếu như một state cần được share Một trong những component cơ hội khá xa cách nhau nhập một tree components và state này cần được passed từ 1 component cho tới một component không giống cho tới khi nó cho tới được điểm tuy nhiên nó được gọi.
Cơ bạn dạng là, state tuy nhiên tất cả chúng ta đang được nói đến việc cần được nhấc lên một component phụ thân sớm nhất và tiếp nữa cho tới khi nó cho tới được kiểu mẫu component tổ tiên chứa chấp toàn bộ những components nó cần thiết kiểu mẫu state này tiếp sau đó pass kiểu mẫu state này xuống . Như vậy tiếp tục khiến cho state trở thành khó khăn rộng lớn trong công việc maintain và less predictable.
Điều này tạo nên thành phần vận hành state nhập ứng dụng trở lên trên không ngăn nắp hao hao ứng dụng trở lên trên vô nằm trong phức tạp. Đó là nguyên nhân tại vì sao tất cả chúng ta cần thiết một state management tool như Redux.
Hiểu cơ hội Redux thực hiện việc
Cái cơ hội tuy nhiên Redux hoạt động và sinh hoạt là khá giản dị. Nó có một store tàng trữ toàn cỗ state của ứng dụng. Mỗi component hoàn toàn có thể access thẳng cho tới state được tàng trữ chứ không cần send drop down props kể từ component này cho tới component không giống.
Xem thêm: Những cách phối đồ với giày lười nữ cực đẹp, miễn chê
Có 3 bộ phận của Redux: Actions, Store, Reducers.
1. Actions
Actions đơn giản là những events. Chúng là cơ hội tuy nhiên tất cả chúng ta send data kể từ ứng dụng cho tới Redux store. Những data này hoàn toàn có thể là kể từ sự tương tác của user vs ứng dụng, API calls hoặc cũng hoàn toàn có thể là kể từ khuông submission.
Actionsđược gửi bằng phương pháp sử dụngstore.dispatch()method, bọn chúng cần sở hữu một type property nhằm biểu lộ loại action nhằm triển khai. Chúng cũng cần sở hữu một payload chứa chấp vấn đề. Actions được tạo ra trải qua một action creator. Ví dụ:
const setLoginStatus = (name, password) => {
return {
type: "LOGIN",
payload: {
username: "foo",
password: "bar"
}
}
}
2. Reducers
Reducers là những function vẹn toàn thủy bọn chúng lấy state lúc này của ứng dụng, triển khai một action và trả về một state mới mẻ. Những states này được lưu như các objects và bọn chúng xác định rõ cơ hội state của một phần mềm thay cho thay đổi trong công việc phản hồi một action được gửi cho tới store.
Đây là 1 trong những ví dụ về kiểu cách tuy nhiên Reducers hoạt động nhập Redux:
const LoginComponent = (state = initialState, action) => {
switch (action.type) {
case "LOGIN":
return state.map(user => {
if (user.username !== action.username) {
return user;
}
if (user.password == action.password) {
return {
...user,
login_status: "LOGGED IN"
}
}
});
default:
return state;
}
};
3. Store
Store lưu hiện trạng phần mềm và nó là có một không hai nhập ngẫu nhiên một phần mềm Redux này. quý khách hoàn toàn có thể access những state được lưu, update state, và ĐK or diệt ĐK những listeners trải qua helper methods.
Tạo một store cho 1 login app:
const store = createStore(LoginComponent);
Các actions thực hiện tại bên trên một state luôn luôn trực tiếp trả về một state mới mẻ. Vì vậy, state này là giản dị và dễ dàng đoán.
Bây giờ, tất cả chúng ta vẫn biết rộng lớn một bọn chúng về Redux, hãy quay về với ví dụ Login component và coi cơ hội liệu pháp tuy nhiên Redux hoàn toàn có thể gom tất cả chúng ta được gì.
class App extends React.Component {
render() {
return (
<div>
<Status user={this.props.user.name}/>
<Login login={this.props.setLoginStatus}/>
</div>
)
}
}
Nguyên lý vận hành
Bạn hoàn toàn có thể coi video clip Redux cơ bạn dạng của Giảng viên Nguyễn Đức Hoàng bên trên trên đây.
Tổng kết
Ở phạm vi bài bác này tôi đã trình diễn nguyên tắc cơ bạn dạng và phương thức hoạt động và sinh hoạt của Redux là gì rồi. Để những bạn cũng có thể tóm được hao hao tưởng tượng nó sinh rời khỏi nhằm thao tác làm việc gì, nội dung bài viết mới mẻ thể hiện tại được những trường hợp giản dị nhất trải qua ví dụ giản dị.
Còn trong lúc thực hiện dự án công trình thực tiễn việc làm hầu hết là tương tác với server (fetch data) và xử lý data tiếp sau đó, thì này là về bất nhất quán asynchronous và xử lý side-effect sau từng action được gọi.
Việc thực hiện Reactjs giờ lộc toàn ngàn đô ko. Anh em nhập tìm hiểu thêm thêm thắt.
Xem thêm: Loại giày chạy bộ nào tốt xứng đáng để lựa chọn ?
Tài liệu tham lam khảo: blog.logrocket.com
Có thể bạn thích coi thêm:
- Sơ lược về connect React-redux
- Cách test phần mềm react redux?
- Tớ vẫn ăn hành với Redux như vậy nào?
Xem thêm việc thực hiện Redux tại TopDev
Bình luận