Я не могу отобразить уведомление в приложении activjs

Question

Я использую react-redux-notify для отображения уведомлений в моем приложении.Я использую функциональный компонент для моего приложения.Я следовал всему руководству, данному на их репозитории Github.Я поделился своим кодом ниже.

ОбъединитьReducers.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 для реакции-избыточности-уведомления.В нем много ошибок и странных примеров кода, поэтому я вижу, что легко запутаться.

Ваш код имеет следующие проблемы:

Соединение
ВыПрежде всего, необходимо подключить ваш компонент к вашему магазину притока connect.Я не уверен, что вы делаете это, но это отсутствует в коде, который вы предоставили.

createNotification
Вот где примеры кода в руководстве путают.createNotification - это действие, которое вы импортируете из response-redux-notify, точно так же, как вы это делаете.Но это не метод, который вы можете вызвать непосредственно из компонента.В избыточном количестве действия должны отправляться из компонента.Так что вам не хватает метода dispatch, который можно получить из реквизита компонента, когда вы подключили его к магазину.Руководство по реагированию-редукции-уведомлению предлагает использовать 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);

В отличие от руководства по github, я переименовал createNotifcation prop в dispatchNotification, чтобы их было легче различить.Код для редуктора должен быть в порядке.

Надеюсь, это поможет