0
我有一個問題，我想顯示一個通知（成功或錯誤），如果用戶的註冊行爲是好的或失敗。我用終極版和我有以下操作頁面：reactjsredx通知調度
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
}
}
這是呈現表單並提交表單數據的反應成分。
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的使用想法？
謝謝