Question

我有以下debounced函数，每次用户输入用户名字段时都会调用该函数。它按预期工作。

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);

问题在于上面的代码不再像我的初始函数那样触发我的发布请求，也没有任何东西被调度。我知道我做错了什么但却无法弄清楚是什么。

编辑：

这就是我设置商店的方式

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

使用redux-thunk在debounced函数中调度动作

1 个答案: