能否将Redux Thunk的dispatch和getState向下传递给辅助函数？

这种传递方式完全可行 #

你代码里把getState和dispatch向下传递给子函数的做法是完全没问题的。Thunk的核心就是让你能拿到这两个方法，你完全可以根据逻辑需要把它们传递给任意下游函数，只要最终使用这些方法的子函数能正确调用（比如调用getState()获取状态，调用dispatch(action)分发动作）就可以。甚至你也可以同时把两个方法都传给同一个子函数，比如childFunction(dispatch, getState)，只要子函数的定义支持接收这些参数就行。

其他更简洁的实现方式 #

除了手动层层传递，还有几种更高效的实现方式：

• 用Redux Toolkit的createAsyncThunk
  Redux Toolkit提供的createAsyncThunk会自动把dispatch、getState等工具方法打包进thunkAPI对象里，你在回调函数里可以直接拿到，下游函数如果是在这个回调内部调用的，要么直接从thunkAPI里取需要的方法，要么把thunkAPI整体传下去，不用手动拆分传递。示例：

  import { createAsyncThunk } from '@reduxjs/toolkit';
  
  const fetchData = createAsyncThunk('data/fetch', async (_, thunkAPI) => {
    // 直接用thunkAPI里的方法
    const currentState = thunkAPI.getState();
    // 把thunkAPI传给子函数
    childFunction(thunkAPI);
  });
  

• 封装依赖注入工具函数
  你可以写一个工厂函数，把dispatch和getState作为依赖注入进去，返回包含所有子函数的对象。这样子函数内部可以直接使用这些依赖，不用每次调用都手动传参，代码更整洁：

  const createActionHelpers = (dispatch, getState) => {
    return {
      fetchUser: async (userId) => {
        const token = getState().auth.token;
        const user = await api.fetchUser(userId, token);
        dispatch({ type: 'user/fetchSuccess', payload: user });
      },
      updateSettings: (settings) => {
        dispatch({ type: 'settings/update', payload: settings });
      }
    };
  };
  
  // 顶层thunk里使用
  export default () => (dispatch, getState) => {
    const helpers = createActionHelpers(dispatch, getState);
    helpers.fetchUser(123);
    helpers.updateSettings({ theme: 'dark' });
  };
  

• React组件中用自定义Hook获取
  如果你的子函数是和React组件逻辑绑定的，可以写一个自定义Hook来获取dispatch和getState，子函数直接通过Hook拿到，不用从thunk里层层传递：

  import { useDispatch } from 'react-redux';
  // 假设你已经通过createStore导出了全局store实例
  import store from './store';
  
  // 自定义Hook，封装获取状态和分发动作的逻辑
  const useReduxHelpers = () => {
    const dispatch = useDispatch();
    const getState = () => store.getState();
    return { dispatch, getState };
  };
  
  // 组件里使用
  const MyComponent = () => {
    const { dispatch, getState } = useReduxHelpers();
    const handleClick = () => {
      childFunction(getState);
      anotherChildFunction(dispatch);
    };
    return <button onClick={handleClick}>执行操作</button>;
  };
  

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