javascript - 如何从 react/redux 中的加载 Action 触发加载动画

Question

我正在开发我的第一个 react/redux web 应用程序，它从外部 api 获取音乐会。我在我的 action creator 中有几个与此相关的操作，包括 “LOADING_CONCERTS”、“GET_CONCERTS”和“SET_CONCERTS”。然后我在音乐会列表组件中呈现这些音乐会。是否可以在 redux 进行加载操作时添加一个加载栏组件进行渲染？一些代码:

我的异步 axios:

export const getConcerts = (artist) => {
      return (dispatch) => {
        dispatch({ type: 'LOADING_CONCERTS' });
        return axios.get(${api_url})
          .then(concerts => {
            dispatch({ type: 'GET_CONCERTS', concerts })
            dispatch({ type: 'SET_CONCERTS', concerts })
            dispatch(addReviewsToConcerts(concerts))
          })
          .catch( err=> {
            console.log(err.code)
            console.log(err.message)
            console.log(err.stack)
          }
          )
        }
    }

我的 reducer :

const initialState = []

export default (state = initialState, action) => {
  switch (action.type) {
    case 'LOADING_CONCERTS':
      return state;
    case 'GET_CONCERTS':
      return action.concerts.data
    case 'ADD_REVIEWS_TO_CONCERTS':
      return action.concerts
    case 'SAVE_CONCERT':
      return action
    default:
      return state;
  }
}

音乐会容器:

import React from 'react';
import ConcertSearchFormWrapper from './ConcertSearchFormWrapper';
import ConcertsList from '../.././components/concerts/ConcertsList';
import { connect } from 'react-redux';

const Concerts = (props) => {
    return (
      <div className="concerts-container">
        <ConcertSearchFormWrapper />
        { (props.concerts.length > 0 && props.concerts !== '\n{warn=Not found}\n') ? <ConcertsList /> : null}
      </div>
    )
};

export default connect((state) => ({ concerts: state.concerts })) (Concerts);

然后是列表组件:

import React from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import { withRouter } from 'react-router-dom'
import { saveConcert } from '../.././actions/concerts/concerts'




const ConcertsList = ({concerts, saveConcert}) => {

    const date = (datetime) => {
      return new Date(datetime).toDateString()
    }

    return (

      <div className = "concerts-list">

        {concerts.sort((a, b) => (a.datetime < b.datetime) ? 1 : -1).map(c => <><Link key={c.id} to={`/concerts/${c.id}`}  onClick={()=>saveConcert(c)}>{c.lineup[0]} at {c.venue.name} on {date(c.datetime)}</Link><br/></>)}
      </div> 
    )
}



const mapStateToProps = (state, ownProps) => {
  return {

      concerts: state.concerts
  }
}

export default withRouter(connect(mapStateToProps, {saveConcert})(ConcertsList))

Answer 1

这是添加加载旋转器或加载栏的方法

1. 更新您的初始状态以包含一个加载指示符(例如“isLoading” bool 值。

const initialState = { isLoading: false, concerts: [], reviews: [] };

1. 更改您的案例陈述以正确更新每个操作的状态，以下是我的大致做法

const concertReducer = (state = initialState, action) => {
  switch (action.type) {
    case "LOADING_CONCERTS":
      return { ...state, isLoading: true };
    case "GET_CONCERTS":
      return { ...state,
               concerts: action.payload,
               isLoading: false };
    case "ADD_REVIEWS_TO_CONCERTS":
      return { ...state,
              reviews: action.payload };

    default:
      return state;
  }
};

export default concertReducer;

1. 使用 connect 和 mapStateToProps 将 isLoading Prop 引入您的组件
2. 使用三元运算符检查“isLoading”是否为真，并有条件地呈现您的微调器或加载栏，如下所示

 {props.isLoading ? (
                <YourLoadinBarHere' />
              ) : (
                <Component or something to render when isLoading is false/>
              )}

现在，您的加载栏将在获取数据时显示 (props.isLoading == true) 当然还有其他解决方案，例如使用 HOC 模式，但我通常是这样做的。