Могу ли я дождаться подключения моего компонента для react-redux? - PullRequest
Новая
       104

Могу ли я дождаться подключения моего компонента для react-redux?

0 голосов
/ 07 мая 2020

Как я могу дождаться, пока response-redux вернет мой новый подключенный компонент? По сути, у меня есть индексный экран, на котором я делаю запрос к базе данных для сохранения клиентов, ответ на этот вызов api является аргументом, с помощью которого я хочу вызвать действие SAVE_CUSTOMERS, а затем создать карту в представлении.

Эта ошибка возникает из-за того, что объект как таковой, который я хочу создать на карте, еще не существует, и поэтому я подделываю ожидание этого Ha sh, и если он сработает.

У меня есть несколько способов заставить это работать, но я здесь за модным решением ?

клиентов. js

import React from "react";
import bridge from "../../helpers/bridge/index";
import { save_customers } from "../../../actions/customers";
import CustomersUI from "../../components/Customers/CustomersUI";
import { connect } from "react-redux";

class CustomersScreen extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    bridge
      .getCustomers(this.props.user.access_token)
      .then((customers) => this.props.save_customers(customers))
      .catch((error) => console.error(error));
  }

  render() {
    return (
      <CustomersUI
        customers={this.props.customers}
      />
    );
  }
}

export default connect(
  (state) => ({
    user: state.user,
    customers: state.customers,
  }),
  {
    save_customers: save_customers,
  }
)(CustomersScreen);

Мой редуктор 

export default (state = {}, action) => {
  switch (action.type) {
    case "SAVE_CUSTOMERS":
      return action.customers;
    default:
      return state;
  }
};

И ... Действие, 

export function save_customers(customers) {
  return {
    type: "SAVE_CUSTOMERS",
    customers,
  };
}

Вывод enter image description here

Очевидно у меня есть combReducers, экспортирующий все .

Возможно, ожидание подключения компонента - не самый изощренный способ решить эту проблему, это просто самое близкое мое представление об этом. Менее 1 недели a go Я использую React Native, никогда раньше не использовал Redux. Спасибо!

1 Ответ

1 голос
/ 07 мая 2020

Массив customers из вашего состояния может быть неопределенным, пока он ожидает ответа от getCustomers. Следовательно, в вашем методе рендеринга вы должны условно визуализировать дочерний CustomersUI только тогда, когда customers определено. 

 render() {
    const { customers } = this.props;
    return (
      customers && (
        <CustomersUI
          customers={this.props.customers}
        />
      )
    );
  }

В качестве альтернативы компонент CustomersUI должен обрабатывать неопределенные значения, чтобы он выигрывал ' t выдать эту ошибку.

...