- vừa được xem lúc

Tìm hiểu về Redux Saga qua ví dụ thực tế

0 0 2k

Người đăng: Trinh Hong Thuc

Theo Viblo Asia

Redux-Saga là gì?

Redux saga là một thư viện redux middleware, giúp quản lý những side effect trong ứng dụng redux trở nên đơn giản hơn. Bằng việc sử dụng tối đa tính năng Generators ( function* ) của ES6, nó cho phép ta viết async code nhìn giống như là synchronos.

Cách hoạt động của Redux Saga

  1. Khi view dispatch 1 action lên cho reducer xử lý thì trước tiên nó phải đi qua middleware Saga
  2. Khi Saga nhận được action mà view dispatch lên thì nó sẽ bắt lấy action đấy để xử lý
  3. Sau khi saga xử lý xong thì nó sẽ dùng hàm put để dispatch một action mới lên cho reducer (action này có thể kèm theo cả dữ liệu mà saga đã xử lý trước đó)
  4. Bây giờ thì reducer mới nhận được action, sau đó reducer sẽ xử các action theo các điều kiện khác nhau(tùy theo action mà saga gửi lên thì reducer xử lý).

Cài đặt

$ npm install redux-saga hoặc $ yarn add redux-saga

Ví dụ thực tế

Cài đặt

$ npx create-react-app$ npm install redux-saga axios react-redux

  1. 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;
  1. Tạo một file 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;
  1. Tại file App.js ta dispatch một action 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 ( <div className="conatainer"> {isLoading ? <h2> Data Is Loading </h2> : ( dataRecruit.map(item => { return <div className="wrapper"> <h1> {item.title} </h1> <p> {item.description}</p> </div> }) )} </div> );
}
  1. Tạo một file Reducer.js để xử lý các dispatch khi Saga gửi 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;
  1. Tại file store.js để config Middleware Saga
import { 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 default store;
  1. Tại fileindex.js ta import file store để sử dụng
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
///css
import store from "./redux/store";
ReactDOM.render( <React.StrictMode> <Provider store={store}> <App /> </Provider> </React.StrictMode>, document.getElementById("root")
);

Kết Luận

Ở bài viết này mình đã giới thiệu mô hình hoạt động thực tế của Redux-saga trong một ứng dụng. Điểm nhấn mạnh ở đây là khi áp dụng Redux-saga vào dự án thực tế thì nó giúp ta quản lý các state hiệu quả hơn và dễ dàng fix các lỗi, nhưng nó cũng có một số hạn chế khá phức tạp và phải khai báo nhiều thành phần khác nhau. Ở bài sau mình sẽ giới thiệu cho các bạn về Redux Toolkit.

Bình luận

Bài viết tương tự

- vừa được xem lúc

Tìm hiểu về Redux Thunk

Chào mọi người, nếu bạn là người đã biết về React và đang làm quen với Redux chắc hẳn bạn đang rất mơ hồ về các khái niệm cơ bản của Redux như dispatch, store, action creator,... bạn còn đang vật lộn với đống document của Redux để hiểu những khái niệm đó và bạn nghe ai đó trong team nói về Redux Thu

0 0 395

- vừa được xem lúc

[React] Giới thiệu tổng quát về Redux Toolkit

1. Redux Toolkit (RTK) là gì và tại sao lại có nó. . .

0 0 6.6k

- vừa được xem lúc

Uống Pepsi code Vue đi - Uống Cocacola code React nha ;)

. (Nguồn ảnh: Internet). Chào các bạn, chào các bạn. Let's go . 1.

0 0 144

- vừa được xem lúc

Cài đặt taillwind css cho dự án React

Trong bài viết cùng mình tìm hiểu cách cài đặt tailwind css cho một dự án React sẵn có. .

0 0 143

- vừa được xem lúc

Formik vs React Hook Form (Phần 1)

Các lập trình viên Front End đều làm việc rất nhiều với form cùng sự phức tạp của ứng dụng. Do vậy chúng ta cần những thư viện form mạnh mẽ hỗ trợ quản lý các form state, form validation... Thành phần module. Formik bao gồm có 9 dependencies khác. . React Hook Form thì không có.

0 0 365

- vừa được xem lúc

Hướng dẫn React Redux cho người mới bắt đầu - Phần 1

Lời mởi đầu. Chào các bạn, ở thời điểm thực hiện bài viết này mình cũng là một người đang bắt đầu tìm hiểu và học với ReactJs và Redux, trong quá trình tìm hiểu đọc các tài liệu về thư viện này mình có tìm được một bài hướng dẫn khá hay nên đã quyết định chia sẻ với mọi người .

0 0 278