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

我正在使用

react redux notify

在我的应用程序中显示通知。我正在为我的应用程序使用一个功能组件。我遵循了Github回购协议中给出的所有指南。我在下面分享了我的代码

combineReducers.js

从'redux'导入{combinereducer}；
从“react redux notify”导入notifyReducer；
从“./reducer”导入减速机；
导出默认合并器({
还原剂：还原剂，
通知：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>
  );
}

从“React”导入React；
从'react redux'导入{connect}；
从“react redux Notify”导入{Notify}；
进口{
创建通知，
通知类型成功，
}从“react redux notify”开始；
const mySuccessNotification={
消息：“您已登录！”，
类型：通知类型成功，
持续时间：0，
老实说，
图标：，
};
函数createRestaurantSetup（道具）{
函数changeState（）{
log（'state event called'）；
createNotification（mySuccessNotification）；
}
返回(
开始设置
);
}

---

我在

changeState

函数中没有收到任何错误。但是通知也没有显示您的代码示例不完全正确。我已经看过Github上关于react redux notify的指南。它有很多错误和奇怪的代码示例，所以我觉得很容易混淆

您的代码存在以下问题：

连接
首先，您需要使用

connect

将组件连接到redux商店。我不确定您是否正在这样做，但您提供的代码中缺少它

创建通知
这就是指南中的代码示例令人困惑的地方。

createNotification

是一个从react redux notify导入的操作，就像您正在做的一样。但它不是一个可以直接从组件调用的方法。在redux中，必须从组件调度操作。因此，您缺少的是

dispatch

方法，当您将组件道具连接到存储时，可以从组件道具中检索该方法。react-redux notify指南建议使用

mapDispatchToProps

，这是一种绑定方法的方法，用于将给定操作直接发送到组件的道具

因此，您的组件代码应该如下所示：

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);

从“React”导入React；
从'react redux'导入{connect}；
从“react redux Notify”导入{Notify}；
进口{
创建通知，
通知类型成功，
}从“react redux notify”开始；
const mySuccessNotification={
消息：“您已登录！”，
类型：通知类型成功，
持续时间：0，
老实说，
图标：，
};
函数createRestaurantSetup（道具）{
函数changeState（）{
const{dispatchNotification}=props；
dispatchNotification（mySuccessNotification）；
}
返回(
开始设置
);
};
const mapDispatchToProps=调度=>({
dispatchNotification：（配置）=>dispatch（createNotification（配置）），
});
导出默认连接（null，mapDispatchToProps）（createRestaurantSetup）；

与github上的指南不同，我将

CreateNotification

prop重命名为

dispatchNotification

，以便更容易区分两者。减速器的代码应该是正确的

希望这有帮助