Redux Saga Là Gì

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.

Cách buổi giao lưu của Redux SagaKhi view dispatch 1 kích hoạt lên cho reducer xử trí thì trước tiên nó phải đi qua middleware SagaKhi Saga nhận được action mà view dispatch lên thì nó đã bắt lấy kích hoạt đấy nhằm xử lýSau khi saga xử lý ngừng thì nó sẽ cần sử dụng hàm put để dispatch một action mới lên đến reducer (action này hoàn toàn có thể kèm theo cả tài liệu mà saga đã cách xử trí trước đó)Bây tiếng thì reducer new nhận được action, sau đó reducer vẫn xử những action theo các điều kiện không giống nhau(tùy theo kích hoạt mà saga trình lên thì reducer xử lý).Cài đặt

$ 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.js

import 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.