React-saga is a lot harder to use than react-Thunk, but it has the advantage of separating the code and writing it in saga.js. There is not much coupling with actionactionviets.js and the incoming dispatch () object is still compatible

Use process:

1. Installation:

yarn add redux-saga
Copy the code

2. Import the function createSagaMiddleware that creates the middleware


import createSagaMiddleware from 'redux-saga'



Copy the code

3. Use createSagaMiddleware to create middleware

const sagaMiddleware = createSagaMiddleware();
Copy the code

4. ApplyMiddleware and put it into the applyMiddleware function

// applyMiddleware(middle 1, middle 2, middle 3) const storeEnhancer = applyMiddleware(thunkMiddleware, sagaMiddleware);Copy the code

generator

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, > <title>Document</title> </head> <body> <script> // function foo(){// console.log('foo executed '); // } // foo(); // function* foo() {// function* foo() {// // return '123'; // yield "one"; // yield "tow"; // yield "three"; //} function* foo() {// return '123' does not take effect // next() the following code is not executed once console.log('111'); yield "one"; console.log('222'); yield "tow"; console.log('333'); yield "three"; yield new Promise((res, rej) => { console.log("hahaha"); }); // To execute the following code, you must call next again without yield console.log(' Next for the fifth time: nonono'); } // returns an iterator const result = foo(); console.log(result); //foo {<suspended>} // 3. Using iterators // A call to next consumes an iterator const res1 = result.next() // The order of execution is also from top to bottom  = result.next() const res3 = result.next() const res4 = result.next() // const res5 = result.next() console.log(res1); console.log(res2); console.log(res3); console.log(res4); //hahaha // console.log(res5); // {value: "tow", done: false} // {value: "one", done: false} // {value: "three", done: false} false } // {value: undefined, done: true} function* bar() { console.log("1212131231"); const result = yield new Promise((resolve, reject) => { setTimeout(() => { resolve("Hello world!" }, 2000)}) // The following code does not output result console.log(' sync get: ', result); } const it = bar(); // console.log(it); Console.log (// it. Next ()//{value: Promise, done: false} it. Next ().value. Then (res => {// console.log(' async :',res); // Async: Hello world! // But we want to get result // res = Hello world! // it.next(); It. Next (res); // Get: Hello world! })); </script> </body> </html>Copy the code

The preparation of saga.js file

  1. TakeEvery: Multiple listening actionTypes can be passed, each of which can be executed (a takeLatest should cancel the previous one)

  2. Put: Dispatching actions in Saga is no longer via Dispatch, but via PUT;

  3. All: Can yield multiple actions.

5. Call run(pass generator function) to start the listening process of middleware, and pass saga to listen;

sagaMiddleware.run(saga);
Copy the code

6. Generator functions listen for the type of action they want to listen for

7. Write your own code in another generator function

import { takeEvery ,put,all} from "redux-saga/effects"; import { FETCH_ABOUT_MULTIDATA } from "./constances"; import axios from "axios"; import { changeBannersAction, changeRecommendsAction } from "./actionCreators"; The function * fetchAboutMultidata (action) {const res = yield axios. Get (" http://123.207.32.32:8000/home/multidata "); console.log(res); const banners = res.data.data.banner.list; const recommends = res.data.data.recommend.list; // yield put(changeBannersAction(banners)); // yield put(changeRecommendAction(recommends)); Yield all([yield put(changeBannersAction(clearly)),//done If it decides done is false next () continues to perform yield put(changeRecommendsAction(recommends)), ]); } function* mySaga() {// FETCH_ABOUT_MULTIDATA (FETCH_ABOUT_MULTIDATA) takeEvery(FETCH_ABOUT_MULTIDATA, fetchAboutMultidata); Next ().value. Then (res => {// it. Next (res); // export default mySaga;Copy the code