时间戳

首页 > 解决方案 > 我无法在 reactjs 应用程序中显示通知我正在使用 react-redux-notify

reactjs - 我无法在 reactjs 应用程序中显示通知我正在使用 react-redux-notify

问题描述

我react-redux-notify用来在我的应用程序中显示通知。我正在为我的应用程序使用功能组件。我已经按照他们的 Github repo 中给出的所有指南进行操作。我在下面分享了我的代码。

combineReducers.js

import { combineReducers } from 'redux';
import notifyReducer from 'react-redux-notify';
import reducer from './reducer';

export default combineReducers({
  rootReducer: reducer,
  notifications: notifyReducer,
});

我已经在我的商店中包含了那个减速器

我的组件代码

import React from 'react';
import { connect } from 'react-redux';
import { Notify } from 'react-redux-notify';
import {
  createNotification,
  NOTIFICATION_TYPE_SUCCESS,
} from 'react-redux-notify';

const mySuccessNotification = {
  message: 'You have been logged in!',
  type: NOTIFICATION_TYPE_SUCCESS,
  duration: 0,
  canDismiss: true,
  icon: <i className="fa fa-check" />,
};

function createRestaurantSetup(props) {
  function changeState() {
    console.log('state event called');
    createNotification(mySuccessNotification);
  }

  return (
    <div className={classes.root}>
      <Notify />

      <Button type="submit" size="small" color="primary" onClick={changeState}>
        Start Setting
      </Button>
    </div>
  );
}

我没有收到任何changeState功能错误。但通知也没有显示

标签： reactjsredux

解决方案

您的代码示例并不完全正确。我查看了 Github 上的 react-redux-notify 指南。它有很多错误和奇怪的代码示例，所以我觉得很容易混淆。

您的代码存在以下问题：

连接
您首先需要使用connect. 我不确定您是否正在这样做，但您提供的代码中缺少它。

createNotification
这是指南中的代码示例令人困惑的地方。这createNotification是您从 react-redux-notify 导入的操作，就像您正在做的那样。但这不是您可以直接从组件调用的方法。在 redux 中，必须从组件中分派操作。dispatch因此，当您将组件连接到商店时，您缺少的是可以从组件道具中检索的方法。react-redux-notify 指南建议使用mapDispatchToPropswhich 是一种绑定方法以将给定操作直接分派到组件的 props 的方法。

所以你的组件代码应该是这样的：

import React from 'react';
import { connect } from 'react-redux';
import { Notify } from 'react-redux-notify';
import {
  createNotification,
  NOTIFICATION_TYPE_SUCCESS,
} from 'react-redux-notify';

const mySuccessNotification = {
  message: 'You have been logged in!',
  type: NOTIFICATION_TYPE_SUCCESS,
  duration: 0,
  canDismiss: true,
  icon: <i className="fa fa-check" />,
};

function createRestaurantSetup(props) {
  function changeState() {
    const { dispatchNotification } = props;

    dispatchNotification(mySuccessNotification);
  }

  return (
    <div className={classes.root}>
      <Notify />

      <Button type="submit" size="small" color="primary" onClick={changeState}>
        Start Setting
      </Button>
    </div>
  );
};

const mapDispatchToProps = dispatch => ({
  dispatchNotification: (config) => dispatch(createNotification(config)),
});

export default connect(null, mapDispatchToProps)(createRestaurantSetup);

与 github 上的指南不同，我将createNotifcationprop重命名为，dispatchNotification以便更容易区分两者。减速器的代码应该没问题。

希望这可以帮助

推荐阅读