Can't do async in redux action - reactjs

Question

i already use redux thunk to do async. it already work with this format :
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)));
}
}
now i want to try do some async in logout action like this :
export function logoutUser() {
console.log("logout");
localStorage.removeItem('laravel_user_token');
return { type: LOGOUT_USER }
}
that's work, Now i intend to redirect the page after logout was performed with this code:
export function logoutUser() {
return dispatch => {
console.log("logout");
localStorage.removeItem('laravel_user_token');
return dispatch({ type: LOGOUT_USER })
.then(() =>
browserHistory.push("/")
);
}
}
My problem is no responses comeback, even my console.log("logout") is not work.

Answer 1

There are some variants how you can perform it.
1. Via promises
This, way as you tried, is performing using Promise, so your main error - that your function is not returning Promise.
Change your action
export function logOut() {
return (dispatch) => {
return new Promise((resolve) => {
dispatch({
type : LOGOUT_USER,
});
resolve();
}
}
Your action handler can be simple reducer function, that will change the state.
case 'LOGOUT_USER' : (state) => {
return Object.assign({}, state, {
autenticated : false
})
}
And then, call it from the react component.
hireLogoutClick = () => {
this.props.logOut().then(() => browserHistory.push('/');
}
logOut function return Promise, which will call your callback function on resolve() step. Firstly will be called your reducer function and then will be called your callback (function passed in .then)
2. Via middleware
There is another variant, how to perform this, via middleware, and call it from reducer, like an action, middleware will catch it and redirect, for my opinion better, then use promises.
Create a middleware
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)
}
Bind it
// Apply the middleware to the store
const middleware = routerMiddleware(browserHistory)
const store = createStore(
reducers,
applyMiddleware(middleware)
)
Use :)
export function logOut () {
return (dispatch) => {
dispatch({
type : types.LOGOUT_USER
})
dispatch({
type : types.ROUTING,
nextUrl: '/'
})
}
}