如何解决React项目双箭头函数中dispatch未使用变量警告？

问题根因 #

你当前的getPlanA、getPlanB属于Redux Thunk的异步action写法，两个函数内部接收了dispatch参数但未使用，且调用getPlan时没有将dispatch传递给它返回的thunk函数，因此触发了未使用变量的警告。

修复方案 #

你只需要在getPlanA、getPlanB的thunk函数内部，调用getPlan后传入当前的dispatch执行即可，修改后代码如下：

export const getPlanA = (id) => (dispatch) => {
  // 调用getPlan返回thunk函数后，传入当前dispatch执行
  return getPlan(id, true)(dispatch);
};

export const getPlanB = (id) => (dispatch) => {
  return getPlan(id, false)(dispatch);
};

const getPlan = (id, isPlanA) => (dispatch) => {
   
  if(isPlanA){
   dispatch(setPlanALoading());
  } else {
   dispatch(setPlanBLoading());
  }
  // 后续API调用逻辑可继续在此补充
}

注意：你原有代码里getPlanA接收的参数是id，但调用getPlan时传的是userId，属于笔误，上面的代码已经修正为传id，你可以根据自己的实际业务调整参数。

可选简化写法 #

如果getPlanA、getPlanB没有额外逻辑，你也可以直接简写为如下形式，不需要额外接收dispatch，自然不会触发未使用警告：

export const getPlanA = (id) => getPlan(id, true);
export const getPlanB = (id) => getPlan(id, false);

这种写法等价于上面的修改版本，因为getPlan(id, true)本身就返回(dispatch) => {}格式的thunk函数，Redux Thunk中间件会自动传入dispatch执行。如果后续需要在getPlanA/getPlanB中添加额外的调度逻辑，换回第一种写法即可。

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