使用redux-thunk調度去抖函數中的操作

Question

我每次用戶輸入用戶名字段時都會調用以下去抖函數。它按預期工作。

export const uniqueUsernameCheck = _.debounce(({ username }) => { 
    axios.post(`${API_URL}/signup/usernamecheck`, { username }) 
    .then((res) => { 
     console.log('Is unique?', res.data.status); 
    }) 
    .catch((error) => { 
     console.log(error); 
    }); 
}, 500); 

但是使用redux-thunk我試圖修改函數，以便我可以在我的函數內調度動作。這是我有：

export const uniqueUsernameCheck = _.debounce(({ username }) => { 
    console.log('I can see this'); 
    return (dispatch) => { 
    console.log('But not this'); 
    dispatch({ type: USERNAME_CHECK }); 
    axios.post(`${API_URL}/signup/usernamecheck`, { username }) 
     .then((res) => { 
     dispatch(authError(res.data.error)); 
     }) 
     .catch((error) => { 
     console.log(error); 
     }); 
    }; 
}, 500); 

問題就出在上面的代碼不再觸發了我的POST請求，如初始功能沒有和從來都沒有被分派。我知道我做錯了什麼，但無法弄清楚什麼。

編輯：

這是我如何設置我的店

const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));

Answer 1

在此請看：

http://codepen.io/anon/pen/egeOyJ

const userService = _.debounce(username => { 
    setTimeout(
    ()=>{ 
     console.log('userService called after debounce. username:', username) 
    } 
    ,1000) 
}, 500) 

const uniqueUsernameCheck = (username) => (dispatch) => { 
    console.log('I can see this') 
    userService(username) 
} 

console.log('begin') 
const reducers = (action) => {console.log(action)} 
const store = Redux.createStore(
    reducers, 
    {}, 
    Redux.applyMiddleware(ReduxThunk.default)) 

store.dispatch(uniqueUsernameCheck('rafael')) 
store.dispatch(uniqueUsernameCheck('rafael')) 
store.dispatch(uniqueUsernameCheck('rafael'))