reactjs redux通知調度

Question

我有一個問題，如果用戶的注冊操作正常或失敗，我想顯示一個通知（成功或錯誤）。 我使用redux，並且具有以下操作頁面：

  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) )
        }
    }
}

這是減速器

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
    }
}

這是渲染表單並提交表單數據的react組件。

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)

我想使用這個包（ https://github.com/gor181/react-notification-system-redux ）顯示動作狀態的通知。

我的問題是這是最好的方法嗎？ 我的想法是在操作頁面中調度操作，但不起作用。 如果我包括dispatch(success(notificationOpts)); 在return dispatch(registerUserOk)或return dispatch(registerUserfail) 。

我做錯了什么，還是不得不改變使用redux的想法？

謝謝

Answer 1

我正在以不同的方式這樣做。

最初，我使用Thunk中間件來調度異步操作。這樣做的好處是，我的操作創建者不返回操作而是無效，他們可以訪問整個狀態，並且您可以分配比執行操作更多的操作。

或者，如果您不想使用Thunk中間件。 您可以在該中間件中編寫自己的中間件，以捕獲REGISTER_USER_INIT或REGISTER_USER_FAIL或REGISTER_USER_OK，然后可以分發通知操作。