React 动画使用lottie

React 动画使用 lottie

核心思想是只要发送请求,没有收到包。就把 store 里面 loadingFlag 变成 true 收到包后在变成 false

(1) 安装包依赖

yarn add react-lottie -S

(2) 封装基础 lottie 核心组件

import React from 'react'
import Lottie from 'react-lottie'
import * as animationData from '../../utils/data.json'

export default class LottieControl extends React.Component {
  constructor(props) {
    super(props)
    this.state = { isStopped: false, isPaused: false }
  }

  render() {
    const loadingPosition = {
      position: 'fixed',
      left: '50%',
      top: '50%',
      marginLeft: '-250px',
      marginTop: '-250px',
      zIndex: 999,
    }

    const defaultOptions = {
      loop: true,
      autoplay: true,
      animationData: animationData.default,
      rendererSettings: {
        preserveAspectRatio: 'xMidYMid slice',
      },
    }

    return (
      <div>
        <Lottie
          options={defaultOptions}
          height={400}
          width={400}
          style={loadingPosition}
          isStopped={this.props.loadingFlag}
        />
      </div>
    )
  }
}

(3) 给 lottie 在套一层壳子最外层属于 page

import React, { Component, Fragment } from 'react'
import LoadingComponent from '../components/Loading/loading.js'
import { connect } from 'react-redux'
class Loading extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  render() {
    const wrap = {
      width: '100vw',
      height: '100vh',
      position: 'fixed',
      top: '0px',
      bottom: '0px',
      background: 'rgba(0,0,0,0.7)',
    }

    return (
      <Fragment>
        <div style={wrap}>
          <LoadingComponent
            loadingFlag={this.props.loadingFlag}
          ></LoadingComponent>
        </div>
      </Fragment>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    loadingFlag: state.loadingFlag,
  }
}
const mapDispatchToProps = (dispatch) => {
  return {}
}
//最后利用store挂钩

export default connect(
  mapStateToProps, //这里面放的是数据
  mapDispatchToProps //里面放的是操作的数据的方法
)(Loading)

(4) 页面上引用的时候必须放到 app 里面

props.children 里面放的是路由

import React, { Component, Fragment } from 'react'
import Loading from './pages/Loading.js'
import { connect } from 'react-redux'
class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      message: '加载',
    }
  }
  render() {
    const { loadingFlag } = this.props
    return (
      <Fragment>
        {loadingFlag ? <Loading></Loading> : null}

        {this.props.children}
      </Fragment>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    loadingFlag: state.loadingFlag,
  }
}
const mapDispatchToProps = (dispatch) => {
  return {}
}
//最后利用store挂钩

export default connect(
  mapStateToProps, //这里面放的是数据
  mapDispatchToProps //里面放的是操作的数据的方法
)(App)

(5) 封装 axios 改变 store 状态

• stage 里面有个状态是 loadingFlag

• ACTION_CHANGE_LOADING 改变状态控制状态

// request.js
import axios from 'axios'
import store from '../store/index.js'
import { ACTION_CHANGE_LOADING } from '../store/actioncreaters'
import url from '../config.js'
/** **** request拦截器==>对请求参数做处理 ******/
axios.interceptors.request.use(
  (config) => {
    // 加载
    store.dispatch(ACTION_CHANGE_LOADING(true))
    let value = sessionStorage.getItem('token') || '123'
    if (value) config.headers.Authorization = value
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)
/** **** respone拦截器==>对响应做处理 ******/
axios.interceptors.response.use(
  (response) => {
    store.dispatch(ACTION_CHANGE_LOADING(false))
    return response
  },
  (error) => {
    // 错误提醒

    store.dispatch(ACTION_CHANGE_LOADING(false))
    const { status } = error.response
    if (status === 401) {
      // 清除token
      sessionStorage.clear()
      window.location.href = url.homeurl
    }
    if (status === 404) {
      window.location.href = url.homeurl
    }
    // 页面跳转
    //router.push('/login')

    return Promise.reject(error)
  }
)
export default axios