как лучше всего обрабатывать состояния в ReactJs компонентах - PullRequest
Новая
       76

как лучше всего обрабатывать состояния в ReactJs компонентах

0 голосов
/ 02 августа 2020

В одном компоненте есть много состояний, и каждое из них влияет на визуализируемый JSX. как лучше всего обрабатывать эти состояния и уменьшать условия if else. 

class AddressBody extends Component {

render() {
    let { addresses, showCart, deliveryTimeSetted, deleteAddress, deleteAddressResponse } = this.props;


if (showCart && Object.keys(showCart).length && "data" in showCart && showCart.data.items.length) {
      showCart.data.items.map((value, index) => {
        images.push(
          <div className="product-item">
            <img src={value.product.default_photo.photo_file.xsmall} />
          </div>
        );
      });
      leftMenuComponent = <LeftMenu showCart={showCart.data} />;
    }

if (deleteAddressResponse && !deleteAddressResponse.success) {
      alert(deleteAddressResponse.message);
      this.props.fetchData("", types.DELETE_ADDRESS_RESPONSE, false);
    }
if(addresses)...
if(deliveryTimeSetted) .....

return (......
....

1 Ответ

1 голос
/ 02 августа 2020

У вас в компоненте так много реквизита, это признак того, что у вашего компонента слишком много обязанностей и он слишком велик. Попробуйте разделить свой компонент на несколько более мелких компонентов и передать им свойства. В меньшем компоненте вы можете обрабатывать все крайние случаи. Это гарантирует, что все ваши компоненты будут нести только одну ответственность и сохранят ваш код читабельным, тестируемым и поддерживаемым. вы можете посмотреть на инструмент управления состоянием React Context или Redux .

...