React-family pg-06 – Redux-saga

Redux-thunk allows redux reducer to expand from receiving an object to a function, but for larger projects, redux-saga has an advantage in managing side effects. (But RXJS has a steep learning curve, which I will update later). Redux-thunk: redux-saga: redux-saga: redux-saga: redux-saga: Redux-thunk

1.redux-saga:

Redux-saga is a library for managing application Side Effffect (Side effects, such as asynchronously fetching data, accessing browser caches, etc.) with the goal of making Side effects management easier, execution more efficient, testing simpler, and handling failures easier. Redux-saga uses ES6’s Generator functionality to make asynchronous processes easier to read, write, and test.

🚀 directory structure is as follows:

Redux ├ ─ index. Js ├ ─ rootReducer. Js ├ ─ user | ├ ─ actionCreator. Js | ├ ─ actionType. Js | └ reducer. Js ├ ─ saga | └ saga. JsCopy the code

Redux-saga: Redux-Saga: Redux-Saga

Let’s start with saga/saga.js:

import {put,takeEvery,call} from "redux-saga/effects"
// API for simulating login
const api = {
    login(){
        return new Promise((resolve,reject) = >{
            setTimeout(() = >{
                if(Math.random()>0.5){
                    resolve({id:24.name:"Kobe"})}else{
                    reject("There is no such player.")}},1000)}}}// Work saga
function* login(action){
    try{
        const result = yield call(api.login);
        // Put is equivalent to dispatch
        yield put({type:"login",result})
    }catch (error){
        yield put({type:"loginError".message:error.message})
    }
}

// associate *login with saga
function* mySaga(){
  // Work saga login
    yield takeEvery("login_request",login)
}
export default mySaga;
Copy the code

• createapiObject, whereloginThe function returns apromise, there are50%Probability of successful login.
• Work sagaThe followingloginthegeneratorFunctionapiThe object of theloginThe method.
• mySagaIs tosagaand*loginRelate them and export themmySaga;

🚀 detailed process is as follows:

• saga.jsYou have to export one of themgeneratorFunction, inside by usingtakeEveryMethod to fetch the specifiedactionTypeAfter the implementation of the corresponding method, preferably this method is also ageneratorFunction, and get the corresponding data;
• After theFetch data (here refers to the result)Result Create another oneactionthroughputSending them tostore.storeTo receiveactionAfter gavereducerIn thereducerFor the corresponding processing.

🚀 then take a look at the code in actionCreator. Js:

import {LOGIN} from "./actionType";
export const loginUser = () = > {
    return {
        type:LOGIN
    }
}
//redux-thunk can have dispatch dispatch a function that takes Dispatch as an argument
// export const login = (dispatch)=>{
// setTimeout(()=>{
// const action = loginUser();
// dispatch(action);
/ /}, 1000)
// };

// For redux-saga pure object action
export const login = () = >{
    return {
        type:"login_request"}}Copy the code

• And if you look at the notes,redux-sagaIt’s still an object that’s returned.

🚀 Finally take a look at some configuration operations in redux/index.js:

import {createStore} from "redux";
import {applyMiddleware} from "redux";
import logger from "redux-logger";
import {rootReducer} from "./rootReducer";
import createSagaMiddleware from "redux-saga";
import mySaga from "./saga/saga";

1. Create middleware
const midSaga = createSagaMiddleware();

//2. Apply saga Middleware through applyMiddleware
/ / create a store
// 🚀 Use applyMiddleware after installing middleware
// 🚀 Combine multiple reducer through combineReducers
const store = createStore(rootReducer,applyMiddleware(logger,midSaga));
Run the middleware
midSaga.run(mySaga);
export default store;
Copy the code