toast-example.js

// Actions
export const ADD_TOAST = "ADD_TOAST";
export const DISMISS_TOAST = "DISMISS_TOAST";

// Action Creator
export function addToast(toast) {
    toast = { ...toast, id: Math.random() };
    return function(dispatch) {
        dispatch({
            type: ADD_TOAST,
            toast
        });

        setTimeout(() => {
            dispatch({
                type: DISMISS_TOAST,
                toast
            });
        }, toast.timeout || 1500);
    };
}

// Reducer
const toastInitialState = {
    toasts: []
};
function toastReducer(state = toastInitialState, action) {
    switch (action.type) {
        case ADD_TOAST:
            return {
                ...state,
                toasts: [...state.toasts, action.toast]
            };

        case DISMISS_TOAST:
            return {
                ...state,
                toasts: state.toasts.filter(
                    toast => toast.id !== action.toast.id
                )
            };

        default:
            return state;
    }
}


// Dispatching a toast looks like this:
dispatch(addToast({ message: "Logged In!" }));