REDUX SAGA LÀ GÌ
Redux saga là 1 thư viện redux middleware, giúp cai quản những side effect trong vận dụng redux trở nên đơn giản và dễ dàng hơn. Bằng việc thực hiện tối đa nhân kiệt Generators ( function* ) của ES6, nó cho phép ta viết async code nhìn giống như là synchronos.

$ npm install redux-sagahoặc$ yarn địa chỉ redux-saga
Ví dụ thực tếCài đặt
$ npx create-react-app và$ npm install redux-saga axios react-redux
Tạo một file saga.jsimport RecruitApi from "API/RecruitApi";import call, put, takeLatest from "redux-saga/effects";import getAllRecruit from "./getAllRecruit.js";import axios from "axios";function* watchGetAllRecruit() try const result = yield call(async () => return await axios.get("https://fakestoreapi.com/products/category/jewelery") ); if (result && result.success) yield put( type: "GET_ALL_RECRUIT_SUCCESS", payload: result ); else yield put( type: "GET_ALL_RECRUIT_FAILURE" ); catch (error) yield put( type: "GET_ALL_RECRUIT_FAILURE", payload: error.response.message, ); function* Saga() yield takeLatest(GET_ALL_RECRUIT, watchGetAllRecruit); export default Saga;Tạo một tệp tin rootSaga.js để gọi các Saga cần xử lýimport all from "redux-saga/effects";import Saga from "./saga";function* rootSaga() yield all(< Saga(), >); export default rootSaga;Tại file App.js ta dispatch một kích hoạt lên để cho file Saga xử lýimport useDispatch from "react-redux";import useEffect, useSelector from "react"; export default function App() const dispatch = useDispatch(); useEffect(() => dispatch(type: "GET_ALL_RECRUIT"), <>); const dataRecruit, isLoading = useSelector(state => state.RecruitReducer) return (
);Tạo một tệp tin Reducer.js nhằm xử lý các dispatch khi Saga nhờ cất hộ lên:
import combineReducers from "redux"; const initState = isError: false, errorMessage: "", dataRecruit: <>, isLoading: false; const RecruitReducer = (state = initState, action) => switch (action.type) case "GET_ALL_RECRUIT": return ...state, isLoading: true, ; case "GET_ALL_RECRUIT_SUCCESS": return ...state, isLoading: false, dataRecruit: action.payload.data, ; case "GET_ALL_RECRUIT_FAILURE": return ...state, isLoading: false, isError: true, ; default: return state; ; const rootReducer = combineReducers(RecruitReducer: RecruitReducer); export default rootReducer;Tại tệp tin store.js nhằm config Middleware Sagaimport createStore, applyMiddleware from "redux";import createSagaMiddle from "redux-saga";import rootReducer from "./rootReducer.js";import rootSaga from "./rootSaga.js"; const sagaMiddle = createSagaMiddle(); const store = createStore( rootReducer, composeWithDevTools( applyMiddleware(sagaMiddle) )); sagaMiddle.run(rootSaga); export mặc định store;Tại fileindex.js ta import tệp tin store nhằm sử dụngimport React from "react";import ReactDOM from "react-dom";import ứng dụng from "./App";import Provider from "react-redux";///cssimport store from "./redux/store";ReactDOM.render( , document.getElementById("root"));Kết LuậnỞ bài viết này mình đã reviews mô hình chuyển động thực tế của Redux-saga vào một ứng dụng. Điểm nhấn mạnh ở đấy là khi vận dụng Redux-saga vào dự án thực tiễn thì nó giúp ta quản lý các state công dụng hơn và dễ dàng fix những lỗi, tuy thế nó cũng có thể có một số giảm bớt khá phức tạp và đề nghị khai báo nhiều thành phần khác nhau. Ở bài bác sau mình sẽ ra mắt cho chúng ta về Redux Toolkit.