About


This library makes it easy to create flash messages and to store them in a Redux store.

What makes this project a little different from most flash message libraries is that it is UI agnostic. This library does not render the FlashMessages for you it only stores them!

Installation

npm install redux-flash-messages --save

Getting started.

We assume you have a working Redux project, if you do not yet have Redux add Redux to your project by following the Redux's instructions.

First install the following dependencies in the package.json:

1. "react-redux": "5.0.3",
2. "redux": "3.6.0",

Now add the flash-message-reducer to your rootReducer for example:

``js
import { combineReducers } from 'redux';

import { flashMessage, FlashMessageStore } from 'redux-flash-messages';

export interface Store {
flashMessage: FlashMessageStore;
}

// Use ES6 object literal shorthand syntax to define the object shape
const rootReducer = combineReducers({
flashMessage
});

export default rootReducer;
`

This should add the FlashMessageStore to Redux, which will store
the flash messages.

Next you have to configure the flashMessages module:

`js
import { createStore } from 'redux';
import { configureFlashMessages } from 'redux-flash-messages';

export const store = createStore(
rootReducer,
);

configureFlashMessages({
// The dispatch function for the Redux store.
dispatch: store.dispatch
});
`

The redux-flash-messages module must be configured before the application is rendered.

Rendering flash messages

Next we need to render the flash messages from the Redux store. How you do this is entirely up to you, but here is a small example:

`js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Store, Dispatch } from 'redux';

import { removeFlashMessage, FlashMessage as FlashMessageShape } from 'redux-flash-messages';

import './FlashMessage.css';

interface Props {
messages: Array;
dispatch: Dispatch;
}

export class FlashMessage extends Component {

onFlashMessageClick(flashMessage: FlashMessageShape) {
/*
Make sure the onClick is called when a user clicks
on the flash message.

Otherwise callbacks on Flash Messages will not work.
*/
flashMessage.onClick(flashMessage);

// This implementation deletes the flash message when it is clicked.
this.props.dispatch(removeFlashMessage(flashMessage.id));
}

render() {
const messages = this.props.messages;

return (


/*
This renders a rather simple flash message.

But you could and should use the 'type' property to
render the flash message in a different style for each 'type'.
*/
renderMessage(message: FlashMessageShape) {
return (
key={ message.id }
className={ flash-message ${message.type}}
onClick={ () => this.onFlashMessageClick(message) }
>
{ message.text }