我已经使用redux thunk来做异步。它已经使用这种格式:
str
现在我想尝试在这样的注销操作中执行一些异步:
export function registerUser({email,password}){
return function(dispatch){
axios.post(`${ROOT_URL}/api/auth/signup`,{email,password})
.then(response =>{
dispatch({type:AUTH_USER});
localStorage.setItem('laravel_user_token',response.data.token);
browserHistory.push('/register');
})
.catch(response => dispatch(authError(response.data.error)));
}
}
这是有效的,现在我打算在使用此代码执行注销后重定向页面:
export function logoutUser() {
console.log("logout");
localStorage.removeItem('laravel_user_token');
return { type: LOGOUT_USER }
}
我的问题是没有回复,甚至我的console.log(“注销”)也无效。
答案 0 :(得分:0)
有一些变体可以执行它。
这种方式,您尝试使用Promise
,因此您的主错误 - 您的功能未返回 Promise
。
更改您的操作
export function logOut() {
return (dispatch) => {
return new Promise((resolve) => {
dispatch({
type : LOGOUT_USER,
});
resolve();
}
}
你的动作处理程序可以是简单的reducer函数,即会改变状态。
case 'LOGOUT_USER' : (state) => {
return Object.assign({}, state, {
autenticated : false
})
}
然后,从反应组件中调用它。
hireLogoutClick = () => {
this.props.logOut().then(() => browserHistory.push('/');
}
logOut
函数返回Promise,它将在resolve()
步骤上调用您的回调函数。首先将调用您的reducer函数,然后将其称为您的回调函数(函数在.then
中传递)
还有另一种变体,如何通过中间件执行此操作,并从reducer调用它,就像操作一样,中间件会抓住它并重定向,为了我的观点更好,然后使用promises。
创建中间件
import { browserHistory } from 'react-router'
import { ROUTING } from '../constants/ActionTypes'
export const redirect = store => next => action => {
if(action){
if (action.type === ROUTING) {
browserHistory['push'](action.nextUrl)
}
}
return next(action)
}
绑定它
// Apply the middleware to the store
const middleware = routerMiddleware(browserHistory)
const store = createStore(
reducers,
applyMiddleware(middleware)
)
使用:)
export function logOut () {
return (dispatch) => {
dispatch({
type : types.LOGOUT_USER
})
dispatch({
type : types.ROUTING,
nextUrl: '/'
})
}
}