使用 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'))