reactjs redux notification dispatch

I have a question I want to show a notification (success or error) if the register action of an user is ok or fail. I use redux and I have the following action page:

  export function registerUserFail(error){
    return {
        type:REGISTER_USER_FAIL,
        payload: error
    }  
}

export function registerUserOk(user){
    return{ type: REGISTER_USER_OK , payload : user }
}


export function registerUser(user){
    return async ( dispatch ) => {
        dispatch ( ()=>{
            return {type: REGISTER_USER_INIT}
        })
        try {
            await API.user.register(user.email , user.password)
            return dispatch(registerUserOk)
        } 
        catch (error) {
            return dispatch(registerUserFail(error) )
        }
    }
}

this is the reducer

import {
    REGISTER_USER_FAIL , REGISTER_USER_OK , 
    LOGIN_USER_FAIL , LOGIN_USER_OK,
    REGISTER_USER_INIT , LOGIN_USER_INIT,
} from '../constants/actions'

import initialState from './initialState'

/**
 * reducer : function with a switch, receives a type and changes a piece of state 
 * but not modifies (it generates and returns a copy) 
 */

 export default function userReducer(state = initialState.user , actions ){

    switch ( actions.type ) {
        
        case REGISTER_USER_INIT:
            
            return{
                ...state,
                loading : true,
                register: true
            }
        case REGISTER_USER_FAIL:
            
            return{
                ...state,
                loading : false,
                register: false,
                error: actions.payload
            }
        
        case REGISTER_USER_OK:
            
            return{
                ...state,
                loading: false,
                register: true,
                error: null,
                user: actions.payload
            }
        
        case LOGIN_USER_FAIL:
            
            return{...state}
    
        case LOGIN_USER_OK:
            
            return{...state}
    
        default:
            return state
    }
}

this is the react component that renders the form and submits form data.

import React, {Component} from 'react'
import PropTypes from 'prop-types'

import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {browserHistory} from 'react-router'

import * as userActions from '../actions/userActions'

class LoginRegister extends Component {

    constructor(props){
        super(props)
        this.handleSubmit = this.handleSubmit.bind(this)
    }

    async handleSubmit(form){
        form.preventDefault()
        const user = {
            email : this.emailInput.value,
            password : this.passwordInput.value,
        }

        if(this.props.formInfo.route == 'register')
        {
            await this.props.userActions.registerUser(user)
        } 
        else
        {
            await this.props.userActions.loginUser(user)
        }
        //go to dashboard
        //browserHistory.push('/dashboard')
    }

    render(){
        return(
            <div className="container">
                <h5>{this.props.formInfo.title}</h5>
                <form onSubmit={this.handleSubmit}  className="col-md-6 offset-md-3">
                    <legend>{this.props.formInfo.title}</legend>
                    <div className="form-group">
                        <label htmlFor="email">Email: </label>
                        <input ref={node => this.emailInput = node } name="email" type="text" className="form-control"/>
                    </div>
                    <div className="form-group">
                        <label htmlFor="password">Password: </label>
                        <input ref={node => this.passwordInput = node } name="password" type="password" className="form-control"/>
                    </div>
                    <div className="form-group">
                        <input value={this.props.formInfo.valueButton} type="submit" className="btn-block btn btn-primary"/>
                    </div>
                </form>
            </div>
        )
    }   
}

function mapDispatchToProps(dispatch){
    return {
        userActions : bindActionCreators( userActions , dispatch)
    }
}

export default connect(null, mapDispatchToProps)(LoginRegister)

I want to use this package (https://github.com/gor181/react-notification-system-redux) to shows notifications of the state of the action.

My question is which is the best way to do this?. My idea is to dispatch an action in the action page but not works. If I include the dispatch(success(notificationOpts)); before the return dispatch(registerUserOk) or return dispatch(registerUserfail).

I have doing something wrong or I have to change my idea of redux use?

thanks

I am doing this in different way.

At first I am using Thunk middleware to dispatch async action., what is good that my action creators doesn't return action but void, they have access to whole state and you are able to dispatch more than on action.

Or if you don't want use Thunk middleware. You can write your own middleware in that middleware you can catch REGISTER_USER_INIT or REGISTER_USER_FAIL or REGISTER_USER_OK and than you can dispatch notification actions.