[英]reactjs redux notification dispatch
我有一个问题,如果用户的注册操作正常或失败,我想显示一个通知(成功或错误)。 我使用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的想法?
谢谢
我正在以不同的方式这样做。
最初,我使用Thunk中间件来调度异步操作。这样做的好处是,我的操作创建者不返回操作而是无效,他们可以访问整个状态,并且您可以分配比执行操作更多的操作。
或者,如果您不想使用Thunk中间件。 您可以在该中间件中编写自己的中间件,以捕获REGISTER_USER_INIT或REGISTER_USER_FAIL或REGISTER_USER_OK,然后可以分发通知操作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.