Question

我正在使用react-redux-notify在我的应用中显示通知。我正在为我的应用程序使用功能组件。我遵循了他们在Github存储库上给出的所有指南。我在下面分享了我的代码。

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函数中没有收到任何错误。但是通知也没有显示

Answer 1

您的代码示例并不完全正确。我已经在Github上查看了react-redux-notify的指南。它有很多错误和奇怪的代码示例，所以我很容易感到困惑。

您的代码存在以下问题：

连接
首先，您需要使用connect将组件连接到Redux存储。我不确定您是否正在执行此操作，但是您提供的代码中缺少它。

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

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

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上的指南不同，我将createNotifcation道具重命名为dispatchNotification，因此更容易区分两者。减速器的代码应该没问题。

希望这会有所帮助

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

1 个答案: