Question

例如：我有2个controll-view容器user.cv.jsx和sidebar.cv.jsx

屏幕由用户和补充工具栏组成。用户界面中的侧边栏渲染。

用户容器：

import React from 'react'
import {Link} from 'react-router-dom';
import { connect } from 'react-redux';
import UserTypeComponents from '../components/user_type.jsx'
import Sidebar from '../../sidebar/containers/sidebar.cv.js'

import * as showList from '../action/list.action.js';
import * as userLimit from '../action/limit.action.js';

import PropTypes from 'prop-types'

function mapStateToProps (state) {
  return {...state}
}

class UserType extends React.Component {

    constructor (props, context) {
        super(props);
        this.context = context;

        if(!this.props.oauth.isAuthenticating) {
            this.context.router.history.push('/login');
            return;
        }
    }

    componentDidMount() {

    }

    render() {
        console.log(this.props);
        return (<div>
                    <Sidebar />
                    <UserTypeComponents {...this.props} />
               </div>);
    }

}

UserType.contextTypes = {
    router: PropTypes.object
}

export default connect(mapStateToProps)(UserType);

侧边栏容器：

import React from 'react'
import {Link} from 'react-router-dom';
import ShowSidebar from '../components/sidebar.jsx';
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import Preloader from '../../../helpers/preloader.helper.js'

import * as active from '../action/active.action.js'
import * as list from '../action/list.action.js'
import * as show from '../action/show.action.js'

import {DEFAULT_COMPONENTS} from '../constant/sidebar.const.js';


function mapStateToProps (state) {
  return state.sidebar
}

function mapDispatchToProps(dispatch) {

  return bindActionCreators({
        ...active,
        ...list,
        ...show
    }, dispatch);
}

class Sidebar extends React.Component {

    constructor (props) {
        super(props);
  }

  listOfLinks(){
    const makeRequest = async () => {
        try {
          const data = await (await fetch('http://localhost:3000/sidebar')).json(),
                active = this.activeComponent(data);

          this.props.list(data);
          this.props.active(active);

        } catch (err) {
          console.log(err)
        }
      }

      makeRequest()
  }

  activeComponent(data){

    for(let key of data){

      if(location.pathname.indexOf(key.name.toLowerCase()) != -1){
        return key.name.toLowerCase();
      }
    }

    return DEFAULT_COMPONENTS;

  }

  componentWillMount() {

      this.listOfLinks();

  }

  activeSidebarState(event){

      let parent = event.target.parentNode,
          target = _$('.site-sidebar__name', parent),
          text = target.innerText.toLowerCase();

      this.props.active(text);
  }

    render() {

    const loading = this.props.sidebar.links.length;

    return (loading ? <ShowSidebar changeActive={::this.activeSidebarState} active={this.props.sidebar.active} links={this.props.sidebar.links} /> : <Preloader />);

    }

}

export default connect(mapStateToProps, mapDispatchToProps)(Sidebar);

对于所有这些，写入了动作和缩减器。侧边栏向服务器发送请求并请求所有模块并形成与它们的链接。用户模块正在访问服务器并需要所有用户。问题是预加载器正在侧栏中形成，当侧栏加载时，预加载器消失。但用户仍然无法启动。问题是：如何控制侧边栏和用户的加载，以便在更新这两个组件时，状态会删除预加载器。

Answer 1

通常的做法是在reducer中存储isFetching标志并更新它以响应获取操作。例如：

function users(state = { users: [], isFetching: false }, action) {
  switch (action.type) {
    case 'FETCH_USERS_START':
      return { ...state, isFetching: true };
    case 'FETCH_USER_SUCCESS':
      return { ...state, isFetching: false, users: action.payload.users };
    default:
      return state;
  }
}

然后，您可以通过mapStateToProps从两个组件访问它并显示预加载器。

这里的一个主要问题是你需要将异步调用移动到一个动作，因此reducer将能够对它做出反应。您可以使用redux-thunk中间件。

加载侧边栏时，预加载器消失

1 个答案: