angularjs - React/Redux 等待商店更新

Question

我遇到一个问题，即在 redux 存储有任何数据之前， react 组件正在呈现。

问题是在现有 Angular 应用程序将数据分派(dispatch)到商店之前，React 组件被渲染到页面引起的。我不能改变渲染的顺序或类似的东西。

我的简单 React 组件是

import React, {Component} from 'react';
import { connect } from 'react-redux';

import {addBot} from './actions';

class FlowsContainer extends React.Component {

  componentDidMount() {
      this.props.initStoreWithBot();
  }

  render() {
    // *** at this point I have the store in state prop
    //but editorFlow array is not yet instanced, it's undefined

    const tasks = this.props.state.editorFlow[0].flow.tasks
    return (
          <div>      
              Flow editor react component in main container          
          </div>
      );
  }

}

const mapStateToProps = (state) => ({
  state : state
})

const mapDispatchToProps = (dispatch) => {
    return {
        initStoreWithBot : () => dispatch(addBot("test 123"))
    };
};

export default  connect(
  mapStateToProps,
  mapDispatchToProps
)(FlowsContainer)

那么我怎样才能推迟渲染直到 editorFlow 数组有元素呢？

Answer 1

您可以使用 Conditional Rendering .

import {addBot} from './actions';

class FlowsContainer extends React.Component {

  componentDidMount() {
      this.props.initStoreWithBot();
  }

  render() {
    // *** at this point I have the store in state prop
    //but editorFlow array is not yet instanced, it's undefined

    const { editorFlow } = this.props.state;
    let tasks;
    if (typeof editorFlow === 'object' && editorFlow.length > 0) {
        tasks = editorFlow[0].flow.tasks;
    }
    return (
      {tasks && 
          <div>      
              Flow editor react component in main container          
          </div>
      }
      );
  }

}

const mapStateToProps = (state) => ({
  state : state
})

const mapDispatchToProps = (dispatch) => {
    return {
        initStoreWithBot : () => dispatch(addBot("test 123"))
    };
};

export default  connect(
  mapStateToProps,
  mapDispatchToProps
)(FlowsContainer)