https://github.com/anupvarghese/redux-notifications-middleware

A redux middleware to handle UI Notification events
https://github.com/anupvarghese/redux-notifications-middleware

Last synced: 2 days ago
JSON representation

A redux middleware to handle UI Notification events

• Host: GitHub
• URL: https://github.com/anupvarghese/redux-notifications-middleware
• Owner: anupvarghese
• Created: 2016-10-29T06:18:13.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-10-05T22:01:16.000Z (about 6 years ago)
• Last Synced: 2024-09-18T16:48:58.430Z (about 2 months ago)
• Language: JavaScript
• Homepage:
• Size: 41 KB
• Stars: 4
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
[![Build Status](https://travis-ci.org/anupvarghese/redux-notifications-middleware.svg?branch=master)](https://travis-ci.org/anupvarghese/redux-notifications-middleware)

[![npm version](https://badge.fury.io/js/redux-notifications-middleware.svg)](https://badge.fury.io/js/redux-notifications-middleware)

## Notification middleware for redux

A simple middleware for handling notifications using redux store

#### How to use

- install package `yarn add redux-notification-middleware`

#### Steps to add middleware

- Add reducer

```

import { combineReducers } from 'redux';

import { notificationReducer } from 'redux-notification-middleware';

const reducer = combineReducers({

  // app reducers

  notification: notificationReducer,

});

```

- Keep list of actions to show notifications

```

import C from './constants';

export default [

  'LOGIN_ACTION',

  'FETCH_PRODUCT_ACTION',

  ...

];

```

- Add middleware to store with events

```

import { createStore, applyMiddleware } from 'redux';

import { notificationMiddleware } from 'redux-notification-middleware';

import notificationEvents from './notification_actions';

import rootReducer from './reducers';

const store = createStore(

  rootReducer,

  applyMiddleware(notificationMiddleware(notificationEvents))

);

...

```

In the actions we can now supply notification payload and delay

For eg:-

```

{

  type: 'FETCH_PRODUCT_SUCCESS',

  notificationPayload: 'Successfully fetched products',

  notificationDelay: 2000,

}

```

Notification states will be available in the redux store and can be consumed in any connected containers