Xin chào tất cả chúng ta, nội dung bài viết này mình xin chia sẻ một ít kỹ năng mình mày mò được về Redux saga, ước ao mọi bạn quan sát và theo dõi.Nếu ai đó đã từng khám phá qua về redux thì đã biết thân quá trình dispatch một action cùng reducer họ thường xuyên đang Điện thoại tư vấn một API như thế nào kia từ bỏ VPS trả về ít nhiều bạn đã chạm chán trường hợp nhưng API chưa kịp trả về kết quả cơ mà các dòng code tiếp theo đã có được triển khai sẽ dẫn mang lại trường phù hợp không mong muốn, cùng để không giống phục điều ấy họ có một thư viện góp chúng ta cách xử trí những vấn đề này thuận tiện hơn sẽ là Redux saga. (trước khi được bài bác này thì chúng ta nên hiểu sang 1 chút về redux cùng react).
Bạn đang xem: Saga là gì
1) Redux saga là gì?
Redux-Saga là một thư viện redux middleware , góp chúng ta thống trị hồ hết side effect vào áp dụng redux trsinh hoạt nên một bí quyết đơn giản rộng với dễ dàng kiểm soát điều hành rộng.
Để gọi được sự hoạt động vui chơi của redux saga bạn phải phát âm một số trong những định nghĩa cơ phiên bản nhỏng generator function.
Xem thêm: Download Windows 7 Home Premium Full Version Free Download Iso
Ví dụ:
Từ phía redux saga chúng ta gửi request cho Server để họ lấy những API về sau đó ta gồm response trả về redux saga, sau khoản thời gian gồm tài liệu thì họ thực hiện các effects, trong số effect này bọn họ gồm các hàm nhằm dispatch sang trọng phía reducers.
2) Các kiến thức và kỹ năng cơ bạn dạng về redux saga
Redux saga cung cấp cho họ một trong những method Call là effect như sau:
Fork(): thực hiện chính sách non - blocking Điện thoại tư vấn trên functionCall(): gọi function. Nếu nó return về một promise, tạm dừng saga cho đến Khi promise được giải quyếtTake(): tạm ngưng cho tới lúc nhận thấy actionPut(): Dùng nhằm dispatch một actiontakeEvery(): Theo dõi một action làm sao đó thay đổi thì Điện thoại tư vấn một saga nào đóakeLastest() : có nghĩa là nếu chúng ta thực hiện một loạt những actions, nó sẽ chỉ xúc tiến cùng trả lại tác dụng của của actions cuối cùngyield(): Có nghĩa là chạy tuần từ khi nào trả ra hiệu quả bắt đầu tiến hành tiếpSelect(): Chạy một selector function để lấy data từ bỏ state3) Ví dụ
Thứ nhất họ khởi chế tạo một project thông qua lệnh sau:npx create-react-ứng dụng my-app
Tiếp theo là setup một số thỏng viện liên quan:npm install redux redux-saga react-redux
Sau Khi khởi sản xuất project với thiết đặt một số trong những thư viện liên quan chúng ta vẫn vào tệp tin index.js nhằm cấu hình redux-saga vào vào 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ó nhiệm vụ tạo nên một middleware năm giữa action với 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();file phầm mềm.js - là tệp tin component thiết yếu tại chỗ này mình gồm liên kết để lấy dữ liệu bên trên store cùng 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(< // hotline những saga watchIncrement(), watchDecrement() >);tại đây những saga sẽ tiến hành tụ lại vào effect all để chạy.
file counterSagas.js đựng những saga mà lại mình tư tưởng 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 gọi thì hàm decrement sẽ được thực hiện với mình đã giải pháp xử lý các side effect sinh sống vào này yield takeEvery(DECREMENT, decrement);Khi action tất cả type là DECREMENT được gọi thì hàm decrement sẽ tiến hành xúc tiến cùng các side effect sẽ tiến hành xử trí sống trong này.
Ưu điểm
Do tách riêng rẽ side-effect thoát ra khỏi action cho nên việc testing là thuận lợi rộng Redux-ThunkGiữ mang đến action pure synchronos theo chuẩn redux và vứt bỏ trọn vẹn callbaông chồng theo javascript truyền thốngNhược điểm
Function ko viết được dạng arrow-function.Phải gọi về Generator function cùng các có mang trong saga patternKết luận
Trên đó là một ít kiến thức và kỹ năng nhưng bản thân mày mò được về các thành phần trong redux-saga, vô cùng hy vọng được sự góp ý của hầu như bạn. Cảm ơn phần nhiều fan đã theo dõi bài viết của mình