react中dispatch_React 企业级最佳实践reduxsaga

学习目标

1. 掌握⽣成器函数 - generator

2. 掌握路由守卫

3. 掌握redux异步⽅案 - redux-saga

资源

redux-saga：

中⽂：https://redux-saga-in-chinese.js.org/

英⽂：https://redux-saga.js.org/

Generator

Generator 函数是 ES6 提供的⼀种异步编程解决⽅案，语法⾏为与传统函数完全不同，详细参考http://es6.ruanyifeng.com/%23docs/generator。

1. function关键字与函数名之间有⼀个*;

2. 函数体内部使⽤yield表达式，定义不同的内部状态。

3. yield表达式只能在 Generator 函数⾥使⽤，在其他地⽅会报错。

function* helloWorldGenerator() {

  yield 'hello';

  yield 'world';

  return 'ending';

}

var hw = helloWorldGenerator();

//执行 console.log(hw.next());

console.log(hw.next());

console.log(hw.next());

console.log(hw.next());

4. yield表达式后面的表达式，只有当调用next方法、内部指针指向该语句时才会执行，因此等于 为 JavaScript 提供了手动的“惰性求值”(Lazy Evaluation)的语法功能。

var a = 0;function* fun() {
    							

    let aa = yield (a = 1 + 1);

    return aa;

}

console.log("fun0", a);let b = fun();console.log("fun", b.next());

//注释下这句试试，比较下前后a的值

console.log("fun1", a);

由于 Generator 函数返回的遍历器对象，只有调用 next 方法才会遍历下一个内部状态，所以其实提供 了一种可以暂停执行的函数。yield 表达式就是暂停标志。

总结一下，调用 Generator 函数，返回一个遍历器对象，代表 Generator 函数的内部指针。以后，每 次调用遍历器对象的 next 方法，就会返回一个有着 value 和 done 两个属性的对象。value 属性表示 当前的内部状态的值，是 yield 表达式后面那个表达式的值; done 属性是一个布尔值，表示是否遍历 结束。

路由守卫

PrivateRoute

思路:创建高阶组件包装Route使其具有权限判断功能。

import React from "react";import {
    Route, Redirect} from "react-router-dom";import {
    connect} from "react-redux";						

export default connect(({
    user}) => ({
    isLogin: user.isLogin}))(  function PrivateRoute({
    isLogin, component: Component, ...rest}) {
    

    return (      

        {
    ...rest}        render={
    props =>				

          isLogin ? (            {
    ...props} />				

                ):(

              to={
    {
                    pathname: "/login",                state: {
    redirect: props.location.pathname}				

                }}

                />

                )}

               />

              );
           }

       )

LoginPage 

import React, {
    Component} from "react";import {
    Redirect} from "react-router-dom/";import {
    connect} from "react-redux";import {
    login} from "../action/user";						

export default connect(
  ({
    user}) => ({
    isLogin: user.isLogin, loading: user.loading, err: user.err}),
  {
    							

    login

    }
)(

class LoginPage extends Component {
        constructor(props) {
    							

      super(props);							

      this.state = {
    name: ""};
    }							

    nameChange = event => {
          this.setState({
    name: event.target.value});							

};

    render() {

      const {
    isLogin, loading, location, login, err} = this.props;      const {
    redi