Redux - интеллектуальные компоненты - как вы обрабатываете асинхронное действие перед монтированием компонента?

Я создаю приложение React / Redux, запрашивающее API для получения данных о пользователях.

Я пытаюсь повторно использовать руководство здесь: https://rackt.org/redux/docs/advanced/ExampleRedditAPI.html

Скажем, у меня есть компонент-контейнер UserPage, который отображает информацию для данного пользователя:

class UserPage extends Component {
  componentWillMount() {
    this.props.dispatch(fetchUser(this.props.user.id));
  }

  render() {
    <UserProfile name={this.props.user.name} />
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
    user: _.find(state.users, (user) => user.id == ownProps.params.userId)),
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    dispatch
  };
};

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

Чтобы получить текущего пользователя, я вызываю API: GET /api/users/:userId

Моя проблема в том, что при инициализации компонента пользователь свойства не обязательно существует.

Поэтому выскакивает ошибка can't call property name on undefined.

Как вы справляетесь с исходным состоянием компонента? Вы полагаетесь на componentWillReceiveProps для обновления интерфейса? Вы используете недвижимость isFetching?

Спасибо!


reactjs javascript redux redux-thunk
person Erem    schedule 11.02.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете просто использовать условное.

class UserPage extends Component {
    componentWillMount() {
        this.props.dispatch(fetchUser(this.props.user.id));
    }

    renderUser() {
        if (this.props.user) {
            return (
                <UserProfile name={this.props.user.name} />
            )
        }
    }

    render() {
        return (
            <div>{this.renderUser()}</div>
        )
    }
}

Как вы упомянули, вы можете захотеть иметь свойство isFetching и отображать счетчик или что-то еще, когда оно истинно.

person Rick Jolly    schedule 11.02.2016