Flux thoughts, asynchronous thunk, the Generator | August more challenges

This is the 7th day of my participation in the August Text Challenge.More challenges in August

Flux thought

The single flow of data depends on the MVVM pattern

action creator

The man who creates pandas is called Panda Creator

It’s called Dog Creator

For example, the following arrow function is an Action Creator:

() => ({" type ":" ADD "})Copy the code

Summary: Action Creator is a function that returns action

Use Action Creator in the Connect decorator

export default connect(
    ({counterReducer}) = > ({
        v : counterReducer.v
    }),
    {
        add(){
            return {"type" : "ADD"}},minus(){
            return {"type" : "MINUS"}
        }
    }
)(App)
Copy the code

The add () and minus() keys are Action Creators, listing functions that return Action.

Create the counteraction.js file

Expose two Action Creators:

export const add = () = > ({"type" : "ADD"});
export const minus = () = > ({"type" : "MINUS"});
Copy the code

The component simply needs to import the counteraction.js file and modify the connect function

export default connect(
    ({counterReducer}) = > ({
        v : counterReducer.v
    }),
    {
        add,
        minus
    }
)(App)
Copy the code

BindActionCreators is bound to ActionCreator

import React from 'react';
import { connect } from "react-redux";
import * as counterActions from "./actions/counterActions";
import {bindActionCreators} from "redux";
 
class App extends React.Component{
    constructor(){
        super(a); }render(){
        return(
            <div>
                <h1>{this.props.v}</h1>

                <button onClick={()= >{ this.props.counterActions.add(); I +}} > press</button>

                <button onClick={()= >{ this.props.counterActions.minus(); }} > as I -</button>
            </div>)}}export default connect(
    ({counterReducer}) = > ({
        v : counterReducer.v
    }),
    (dispatch) = > ({
        counterActions: bindActionCreators(counterActions , dispatch)
    })
)(App)
Copy the code

asynchronous

redux-thunk

npm install --save redux-thunk
Copy the code

export const addAfter2000ms = () = > () = > {}
export const addAfter2000ms = () = > (dispatch) = > {}
Copy the code

Async is used in combination with redux-thunk

import axios from 'axios';
const GETDATA = "GETDATA"
const getData = (url:any, value:any) = > async (dispatch:any) => {
    let results = await axios.post(url, value, {
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    })
    .then(res= > res.data.data)
    .catch(error= > {
        console.log(error);
    });
    dispatch(fetchData(results));
}
const fetchData = (results:any) = > ({type: GETDATA, results})

export {
    getData
}
Copy the code

redux-saga

npm install --save redux-saga
Copy the code

npm install --save-dev babel-plugin-transform-runtime
Copy the code

plugins: ['transform-object-rest-spread'.'transform-runtime']
Copy the code

export const helloSaga = function* () {
    console.log('I'm Saga, hello! ')}Copy the code

Characteristics of the synchronization function

1. The function must complete all statements before executing subsequent statements
2. Function body returns a value with return
3. When the function is called, the left side of the equal sign is received with a variable

Features of asynchronous functions:

function getNumberAfter2000ms(cb){
    setTimeout(function(){
        cb(Math.random()); 
    },2000);
}

getNumberAfter2000ms(function(a){
    console.log(a);
});
console.log("Hello");
Copy the code

Callback hell

Call getNumberAfter2000ms 3 times using 6s to get 3 numbers

getNumberAfter2000ms(function(a){
    console.log(a);
    getNumberAfter2000ms(function (b) {
        console.log(b);
        getNumberAfter2000ms(function (c) {
            console.log(c);
        });
    });
});
Copy the code

Know the Promise

Encapsulate a Promise

Write an asynchronous function that returns a Promise instance with a then method at the center of its circle

The overall structure

function getNumberAfter2000ms(){
    return new Promise(a); } getNumberAfter2000ms().then();Copy the code

When you instantiate a Promise, you must pass in a function (resolve,reject)=>{}. The resolve parameter indicates success, reject parameter indicates failure. Resolve is a callback to success, passed in from then.

function getNumberAfter2000ms(){
    return new Promise((resolve , reject) = > {
        setTimeout(function(){
            resolve(Math.random());
        },2000);
    });
}

getNumberAfter2000ms().then(function(a){
    console.log(a);
});
Copy the code

Now you can chain-call an asynchronous function, and you don’t need to destroy the black hole.

getNumberAfter2000ms()
.then(function(a){
    console.log(a);
    return getNumberAfter2000ms();
})
.then(function (a) {
    console.log(a);
    return getNumberAfter2000ms();
})
.then(function (a) {
    console.log(a);
    return getNumberAfter2000ms();
});
Copy the code

Wrap a promise function of your own

class ChengNuo{
    constructor(fn){
        this.fn = fn;
    }
    then(cb){
        this.fn(cb)
    }
}
function getAfter2s(){
    return new ChengNuo((resolve,reject) = > {
        setTimeout(function(){
            resolve(Math.random())
        },1000)
    })
}
getAfter2s().then(function(b){
    console.log(b);
    return getAfter2s()
})
Copy the code

Fetch () function — poor compatibility

axios

Functionality: Using the XMLHttpRequest object, emulates the Promise syntax as fetch syntax. Install dependencies:

npm install --save axios
Copy the code

Usage:

import axios from "axios";

function* addServer() {
    const {m} = yield axios.get("/api/shu").then(data= >data.data);
    yield put({ "type": "ADD" , m});
}
Copy the code

async / await

function getNumberAfter2000ms(){
    return new Promise((resolve , reject) = > {
        setTimeout(function(){
            resolve(Math.random());
        },2000);
    });
}

async function main(){
    const a = await getNumberAfter2000ms().then(data= > data);
    console.log(a);
    const b = await getNumberAfter2000ms().then(data= > data);
    console.log(b);
    const c = await getNumberAfter2000ms().then(data= > data);
    console.log(c);
}

main();
Copy the code

Generator Star function

A Generator is a library interrupt point function that can have multiple return values.

example

function* gen(){
    console.log("Ha ha");
    yield "A";
    console.log("Hee hee");
    yield "B";
    console.log("Moo moo da.");
    yield "C";
}
var I = gen(); // Activate the star function

I.next()     // output ha ha
I.next()     // Output hee hee
I.next()      // Output the output
Copy the code

Yield means “output”, which is the breakpoint of the function.

The gen() function puts the virtual “cursor” in place, on the line below function*. At this point I can call the next() method, which means to execute the function to its nearest yield.

The value after yield can also be seen

console.log(g.next().value); / / output ACopy the code

The star function works perfectly with Promise.

function getNumberAfter2000ms(){
    return new Promise((resolve) = > {
        setTimeout(function(){
            resolve(Math.random())
        },2000);
    });
}

function* gen(){
    yield getNumberAfter2000ms();
    yield getNumberAfter2000ms();
    yield getNumberAfter2000ms();
}

var i = gen();  // Activate and prepare the cursor

i.next().value
.then(data= >{
    console.log(data);
    return i.next().value;
})
.then(data= > {
    console.log(data);
    return i.next().value;
})
.then(data= > {
    console.log(data);
})
Copy the code

Encapsulate a delay function

function delay(time){
    return new Promise((resolve) = >{
        setTimeout(function(){
            resolve()
        },time)
    })
}

function* gen(){
    yield delay(2000)
    yield Math.random()
}
Copy the code

Thank you

Thank you in your busy schedule to open this article, I hope to help you, if you have any questions, welcome to point out.

If you think it’s okay, give it a thumbs up.