如何为 react/redux 创建加载器旋转答案

【问题标题】：How to create loader spin for react/redux如何为 react/redux 创建加载器旋转
【发布时间】：2018-06-21 20:00:04
【问题描述】：

从数据库获取数据时，我的项目需要加载器旋转以用于每个组件但我不知道该怎么做。现在我只有第一次打开页面的预加载器（CSS）。

【问题讨论】：

标签： javascript reactjs redux react-router react-redux

【解决方案1】：

假设您想从/charts 端点获取图表数据。

//action
export const fetchOrdersChartsData = () => dispatch => {
    dispatch({ type: CHARTS_LOADING }); //Loading starts
    api.get('/charts')
      .then(charts => 
        dispatch({
          type: CHARTS_LOADED, //Loading ends
          payload: charts.data,
        }))
      .catch(error => {
       //dispatch error 
      });
  };

//reducer
export default (state = initState, action) => {
  switch (action.type) {
    case CHARTS_LOADING:
      return {
        ...state,
        loading: true,
      };
    case CHARTS_LOADED:
      return {
        ...state,
        charts: action.payload,
        loading: false,
      };
    default:
      return state;
  }
};

在您的组件中，您可以跟踪 loading 状态并基于此显示/隐藏加载器。

import React from 'react'
import { connect } from 'react-redux';
import Loader from './Loader'
import Chart from './Chart'

class Charts extends React.PureComponent{
    render(){
        const {loading} = this.props;
        return(
            <div>
                {loading ? <Loader/> : <Chart/>}
            </div>
        )

    }
}


export default connect(
    state => ({
      loading: state.charts.loading,
    }),{})(Accumulation);

【讨论】：

【解决方案2】：

如果您是新手，那么我建议您使用包而不是创建自己的包，您可以找到很多包。

你可以在这里看到其中一个https://www.npmjs.com/package/react-loader-advanced

你可以用喜欢

import Loader from 'react-loader-advanced';

class Example extends Component {
render() {
    if(!loaded) {return (<Loader show={true} message={<i className='material-icons spinner-icon'>autorenew</i>}></Loader>  )}
 }
}

您可以传递您想要的微调器或文本。您可以在 github 上阅读更多内容

【讨论】：