如何返回异步箭头函数？React+Redux代码精简实现疑问

你遇到的问题是混淆了函数声明和箭头函数的语法规则，咱们一步步来修正：

错误写法的问题分析 #

你尝试的 export async function checkCookieOne() => dispatch(...) 是语法错误的，因为async function是函数声明的语法，后面不能直接跟箭头=>；箭头函数的导出需要用const/let来定义，再结合嵌套箭头来实现thunk的结构。

正确的单行（或简洁多行）写法 #

因为Redux Thunk要求返回一个接收dispatch的异步函数，所以我们可以用嵌套箭头函数来实现简洁的单行结构：

// 完全单行写法
export const checkCookieOne = () => async dispatch => dispatch(store.actions.toggleCookieOneValue(checkGivenCookieExists('cookieOne')));

// 换行增强可读性的简洁形式（逻辑更清晰）
export const checkCookieOne = () => 
  async dispatch => 
    dispatch(store.actions.toggleCookieOneValue(checkGivenCookieExists('cookieOne')));

逻辑等价性说明 #

这个写法和你原来的代码逻辑完全一致：

1. 外层箭头函数() =>对应你原来的function checkCookieOne() { return ... }
2. 内层async dispatch =>对应你原来的async dispatch => { ... }
3. 最后直接返回dispatch(...)，省略了大括号和return（箭头函数单行默认返回）

补充：保留函数声明风格的简洁写法 #

如果你更倾向于函数声明而不是箭头函数，也可以写成这样（比你之前的写法更紧凑）：

export function checkCookieOne() {
  return async dispatch => dispatch(store.actions.toggleCookieOneValue(checkGivenCookieExists('cookieOne')));
}

只要确保checkGivenCookieExists('cookieOne')的返回值和你原来的Boolean(window.localStorage.getItem('cookieOne') || false)逻辑一致，这个改写就完全没问题~

内容的提问来源于stack exchange，提问作者nopassport1