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) 来显示操作状态的通知。

我的问题是最好的方法是什么？我的想法是在动作页面中调度一个动作但不起作用。如果我在return dispatch(registerUserOk) 或return dispatch(registerUserfail) 之前包含dispatch(success(notificationOpts));。

我做错了什么或者我必须改变我对 redux 使用的想法？

谢谢

Answer 1

我正在以不同的方式这样做。

起初我使用Thunk middleware 来调度异步动作。我的动作创建者不返回动作而是无效的有什么好处，他们可以访问整个状态，并且您可以调度比动作更多的内容。

或者，如果您不想使用 Thunk 中间件。您可以在该中间件中编写自己的中间件，您可以捕获 REGISTER_USER_INIT 或 REGISTER_USER_FAIL 或 REGISTER_USER_OK 并且可以调度通知操作。