Saga là gì

Xin chào toàn bộ chúng ta, bài viết này bản thân xin share một chút kỹ năng và kiến thức bản thân tìm hiểu được về Redux saga, mong các fan theo dõi và quan sát.Nếu ai đó đã từng khám phá qua về redux thì đang biết thân quá trình dispatch một action với reducer chúng ta thường xuyên sẽ Call một API nào kia tự server trả về không ít người đang gặp ngôi trường đúng theo cơ mà API còn chưa kịp trả về tác dụng cơ mà những dòng code tiếp sau đã làm được triển khai đang dẫn mang đến ngôi trường vừa lòng không hề mong muốn, với nhằm khác phục điều đó họ tất cả một thỏng viện giúp bọn họ xử lý những điều đó thuận tiện hơn đó là Redux saga. (trước khi được bài này thì các bạn buộc phải hiểu qua 1 chút ít về redux với react).

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

1) Redux saga là gì?

Redux-Saga là một thỏng viện redux middleware , giúp họ thống trị số đông side effect vào áp dụng redux trsống đề nghị một phương pháp đơn giản dễ dàng rộng và dễ điều hành và kiểm soát hơn.

*
https://neftekumsk.com/saga-la-gi/imager_1_6688_700.jpg

Để gọi được sự hoạt động vui chơi của redux saga bạn cần hiểu một số khái niệm cơ bạn dạng như generator function.

Xem thêm: Sinh Năm 2013 Mệnh Gì? Tổng Quan Về Người Sinh Năm 2013 Tuổi Quý Tỵ Hợp Tuổi Nào, Màu Gì, Hướng Nào

Ví dụ:

*

Từ phía redux saga chúng ta gửi request cho Server để bọn họ rước các API về kế tiếp ta có response trả về redux saga, sau thời điểm bao gồm dữ liệu thì chúng ta áp dụng các effects, trong các effect này chúng ta có các hàm nhằm dispatch lịch sự phía reducers.

2) Các kỹ năng cơ bản về redux saga

Redux saga cung ứng cho bọn họ một số method Gọi là effect nlỗi sau:

Fork(): sử dụng nguyên lý non - blocking call trên functionCall(): call function. Nếu nó return về một promise, tạm dừng saga cho đến lúc promise được giải quyếtTake(): tạm dừng cho tới Khi nhận ra actionPut(): Dùng nhằm dispatch một actiontakeEvery(): Theo dõi một action như thế nào kia chuyển đổi thì Gọi một saga làm sao đóakeLastest() : Tức là giả dụ họ thực hiện một loạt các actions, nó đã chỉ tiến hành với trả lại công dụng của của actions cuối cùngyield(): Có nghĩa là chạy tuần trường đoản cú khi nào trả ra hiệu quả bắt đầu xúc tiến tiếpSelect(): Chạy một selector function để mang data trường đoản cú state

3) Ví dụ

Thứ nhất bọn họ khởi tạo một project trải qua lệnh sau:

npx create-react-ứng dụng my-app

Tiếp theo là thiết lập một vài tlỗi viện liên quan:

npm install redux redux-saga react-redux

Sau Lúc khởi chế tác project với cài đặt một trong những thỏng viện tương quan họ đã vào tệp tin index.js nhằm cấu hình redux-saga vào trong project

// src/index.jsimport React from "react";import ReactDOM from "react-dom";import "./index.css";import App from "./App";import * as serviceWorker from "./serviceWorker";import rootSaga from "./sagas/rootSaga";//Reduximport createStore, applyMiddleware from "redux";import Provider from "react-redux";import myReducer from "./reducers";//Redux Sagaimport createSagaMiddleware from "redux-saga"; // hàm này còn có trách nhiệm tạo nên một middleware năm giữa action và reducer trong redux// Middlewareconst sagaMiddleware = createSagaMiddleware(); //var store = createStore( myReducer, applyMiddleware(sagaMiddleware));ReactDOM.render( Provider store= store > App /> /Provider>, document.getElementById("root"));sagaMiddleware.run(rootSaga); // Hàm này là chạy các sagaserviceWorker.unregister();tệp tin phầm mềm.js - là tệp tin component chính ở đây bản thân gồm kết nối để đưa tài liệu bên trên store với dispatch những action cần thiết.// App.jsimport React, Component from "react";import connect from "react-redux";import incrementAction, decrementAction from "./actions";import "./App.css";class App extends Component onDecrement() this.props.onDecrement(1);onIncrement() this.props.onIncrement(1)render() return (div className="App">header className="App-header">div className="container">div style=marginBottom: "15px">button onClick=this.onDecrement.bind(this) style=marginRight: "15px" type="button" className="btn btn-info">Giảm/button>button onClick=this.onIncrement.bind(this) type="button" className="btn btn-info">Tăng/button>/div>div>Counts: span>this.props.times/span>/div>/div>/header>/div>);const mapStateToProps = (state) => return times: state.counterReducers ? state.counterReducers : 0;const mapDispatchToProps = (dispatch) => return onDecrement: (step) => dispatch(decrementAction(step));,onIncrement: (step) => dispatch(incrementAction(step));;export mặc định connect(mapStateToProps, mapDispatchToProps)(App);Trong rootSaga// rootSaga.jsimport all from "redux-saga/effects";import watchIncrement, watchDecrement from "./counterSagas"export default function* rootSaga() yield all(< // call các saga watchIncrement(), watchDecrement() >);tại trên đây những saga sẽ được tụ lại trong effect all để chạy.

file counterSagas.js cất các saga mà mình định nghĩa ví như watchIncrement, watchIncrement

import INCREMENT, DECREMENT from "../actions/actionTypes";import takeEvery from "redux-saga/effects";function* increment() yield console.log("this is increment saga", 1111);function* decrement() yield console.log("this is decrement saga", 2222);export function* watchIncrement() // yield takeEvery(INCREMENT, increment);export function* watchDecrement() // lúc action DECREMENT được điện thoại tư vấn thì hàm decrement sẽ tiến hành tiến hành và mình sẽ cách xử trí các side effect ở trong này yield takeEvery(DECREMENT, decrement);khi action bao gồm type là DECREMENT được hotline thì hàm decrement sẽ tiến hành triển khai cùng những side effect sẽ được cách xử trí nghỉ ngơi trong này.

Ưu điểm

Do tách bóc riêng rẽ side-effect ra khỏi action cho nên việc testing là thuận tiện rộng Redux-ThunkGiữ đến action pure synchronos theo chuẩn chỉnh redux cùng vứt bỏ trọn vẹn callbaông xã theo javascript truyền thống

Nhược điểm

Function ko viết được dạng arrow-function.Phải gọi về Generator function với các tư tưởng vào saga pattern

Kết luận

Trên đấy là một chút kiến thức mà lại bản thân tò mò được về những thành bên trong redux-saga, rất mong mỏi được sự góp ý của mọi bạn. Cảm ơn đông đảo fan vẫn theo dõi và quan sát nội dung bài viết của mình