Как добавить класс в общий компонент Header, основанный на данных редукса - PullRequest
Новая
       14

Как добавить класс в общий компонент Header, основанный на данных редукса

0 голосов
/ 11 декабря 2018

В моем приложении JS реагирования у меня есть значок уведомления, добавленный в компонент заголовка.Я создал отдельный компонент, где я делаю вызовы API, чтобы получить данные и отобразить их.здесь я пытаюсь добиться изменения цвета значка в компоненте заголовка, если есть несколько уведомлений.Компонент My Header- 

import React from "react";
import { connect } from "react-redux";
import {
  setPoiData,
  getNotification,
  updateNotification
} from "../../actions/action";
import { Link } from "react-router-dom";
const axios = require("axios");

    class Notification extends React.Component {
      render() {
        const data = this.props.getNotificationStatus;
        const highlightBellIcon = Object.keys((data.length === 0))



          return (
              <div className="notification-parent">

                <Link to="/notification-details">
                  <span className={"glyphicon glyphicon-bell " + (!highlightBellIcon ? 'classA' : 'classB')} />
                </Link>
              </div>
            );
          }
        }
        const mapStateToProps = state => ({
          getNotificationStatus: state.root.getNotificationStatus
        });

        export default connect (mapStateToProps)(Notification)

Здесь getNotificationStatus - это состояние, в котором хранится значение в Redux.

Notification-details Component- 

import React from "react";
import { connect } from "react-redux";
import {
  getNotification
} from "../../actions/action";
import { Spinner } from "../Spinner";
import { setTimeout } from "timers";
import NotificationTile from "../NotificationTile/NotificationTile";

const axios = require("axios");
class NotificationDetails extends React.Component {

  componentDidMount = () => {
    this.intervalId = setInterval(() => this.handleNotification(), 2000);
    setTimeout(
      () =>
        this.setState({
          loading: false
        }),
      10000
    );
  };

  componentWillUnmount = () => {
    clearInterval(this.intervalId);
  };
  handleNotification = () => {
    let postData = {
       //inputParams
    }
    //call to action
    this.props.dispatch(getNotification(postData));
  };

  getNotificationDetails = data => {
    const payloadData =
      data.payLoad &&
      data.payLoad.map(item => {
        console.log(this);
        return <NotificationTile {...item} history={this.props.history} />;
      });
    //console.log(payloadData);
    return payloadData;
    console.log("InitialState" + payloadData);
  };
  render() {
    const { loading } = this.state;
    const data = this.props.getNotificationStatus;
    return (
      <div className="notificationContainer container">
        <div className="notification-alert">
          {!loading ? (
            this.getNotificationDetails(data)
          ) : (
            <h1>
              Waiting for notifications..
              <Spinner />
            </h1>
          )}
        </div>
      </div>
    );
  }
}
const mapStateToProps = state => ({
  getNotificationStatus: state.root.getNotificationStatus
});

export default connect(mapStateToProps)(NotificationDetails);

Проблема, с которой я столкнулсяоблицовка всегда classB добавляется, так как вызов API происходит при нажатии на значок колокольчика.Поэтому, когда я впервые попадаю на страницу, вызов API не происходит, пока я не нажму на значок колокольчика.Мой код работает абсолютно нормально. Просто мне нужно добавить класс в мой компонент Notification (который является глобальным компонентом), основанный на ответе, полученном в NotificationDetail Comp, который является родственным компом. Есть предложения, где я ошибаюсь?

Ответы [ 2 ]

0 голосов
/ 11 декабря 2018

notification-details - это отдельный компонент, который извлекает данные и добавляет их в хранилище, и есть <Link to="/notification-details">, который загружает этот компонент, в этом случае в вашем магазине изначально не будет данных, пока вы не нажмете на значок колокольчика, которыйправильное поведение.

Решение:

Перейдите на один шаг вверх в дереве компонентов, я имею в виду переход к компоненту, который превосходит Notification (его компонент-контейнер)и загрузите туда детали-уведомлений (вы можете использовать любую ловушку жизненного цикла создания), также есть флаг (что-то вроде isNotificationLoaded ), который проверяет, где state.root.getNotificationStatus заполняется данными и загружает панель уведомлений только после того, как истина.

что-то вроде 

render() {
 const data = this.props.getNotificationStatus;
 const noticationPanel = data.length > 0 ? <Notification/> : null;

 return({noticationPanel});
}

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

Надеюсь, это поможет решить вашу проблему.

0 голосов
/ 11 декабря 2018

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

Использование Redux-thunk

В этом коде ниже setTimeout - это место, где ваш асинхронный вызов выполняется в 

const INCREMENT_COUNTER = 'INCREMENT_COUNTER';

function increment() {
  return {
    type: INCREMENT_COUNTER
  };
}

function incrementAsync() {
  return dispatch => {
    setTimeout(() => {
      // Yay! Can invoke sync or async actions with `dispatch`
      dispatch(increment());
    }, 1000);
  };
}

Обновите вас REDUX Store , и вы вызываете этого создателя действия из componentDidMount () , чтобы получать уведомления в самый первый раз.

...