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 来分派异步动作。我的动作创建者没有 return 动作但无效的好处是什么，他们可以访问整个状态并且你可以派遣多于行动。

或者如果您不想使用 Thunk 中间件。您可以在可以捕获 REGISTER_USER_INIT 或 REGISTER_USER_FAIL 或 REGISTER_USER_OK 的中间件中编写自己的中间件，然后您可以发送通知操作。

reactjs redux 通知调度

reactjs redux notification dispatch

javascript

flux

reactjs

redux