Question

我已经使用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（“注销”）也无效。

Answer 1

有一些变体可以执行它。

的 1。通过承诺

这种方式，您尝试使用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中传递）

的 2。通过中间件

还有另一种变体，如何通过中间件执行此操作，并从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: '/'
     })
   }
  }

在redux操作中无法执行异步操作

1 个答案:

的 1。通过承诺

的 2。通过中间件