代码之家 › 专栏 › 技术社区 › techie_questie

如何基于redux数据在公共头组件中添加类

react-redux redux reactjs

techie_questie · 技术社区 · 6 年前

在react JS应用程序中,在header组件中添加了一个通知图标。我已经创建了一个单独的组件,在那里我执行api调用来获取数据并显示它。我在这里试图实现的是,如果有一些通知警报,则更改标题组件中图标的颜色。

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中保存值的状态。

通知详细信息组件-

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调用是在单击bell图标时发生的。因此,当我第一次登陆页面时,除非单击bell图标,否则不会调用api。我的代码工作得很好,只是我需要根据NotificationDetail Comp中收到的响应将类添加到我的通知组件(这是一个全局组件)中,NotificationDetail Comp是一个同级组件。有什么我出错的建议吗?

2 回复 | 直到 6 年前

Praveen Rao Chavan.G 6 年前

当您必须基于异步调用更新REDUX存储时,应该使用 动作创造者 ,这些动作创造者会给你能力

使用 Redux-thunk

在下面的代码中是异步调用进入的位置

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商店 你叫这个动作创造者这样你就能在第一时间收到通知。

Praveen Rao Chavan.G 6 年前

notification-details 有 <Link to="/notification-details"> 加载这个组件,在这种情况下,你的商店最初只有在您单击bell图标(这是正确的行为)时才会有数据。

通知(其容器组件)和加载 ,还有一个标志(类似 已加载通知 state.root.getNotificationStatus状态 填充数据并仅在该值为真后加载通知面板。

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

 return({noticationPanel});
}

这将确保仅在有数据时加载,直到那时您可以显示一些活动指示器。

希望这有助于解决你的问题。