Redux Thunk未调度

Redux Thunk 是 Redux 的一个中间件，它允许你在 action creators 中编写异步逻辑。这意味着你可以在 action creator 中执行异步操作（例如 API 调用），然后在操作完成后分发同步或异步的 action。

基础概念

Redux Thunk 的核心思想是，action creator 可以返回一个函数而不是一个普通的 action 对象。当 Redux Thunk 中间件看到这个函数时，它会调用这个函数，并将 dispatch 和 getState 作为参数传递给它。这使得你可以在函数内部执行异步操作，并在适当的时候使用 dispatch 分发 action。

优势

1. 简化异步逻辑：Redux Thunk 使得在 Redux 中处理异步操作变得更加简单和直观。
2. 代码组织：通过将异步逻辑封装在 action creators 中，可以保持 reducer 的纯净性，使其只关注如何根据 action 更新状态。
3. 灵活性：你可以根据需要在 action creator 中编写复杂的异步逻辑，包括条件分支、错误处理等。

类型

Redux Thunk 主要涉及两种类型的 action：

1. 普通 action：由对象表示，包含 type 和其他 payload 数据。
2. thunk action：由返回函数的 action creator 创建，这个函数接收 dispatch 和 getState 作为参数。

应用场景

Redux Thunk 适用于需要在 Redux 中处理异步操作的场景，例如：

• 数据获取（从 API 获取数据）
• 表单提交（处理表单提交后的异步响应）
• 用户认证（处理登录、注册等异步操作）

问题与解决

如果你遇到 Redux Thunk 未调度的问题，可能是由以下原因导致的：

1. 未正确安装或配置 Redux Thunk：确保你已经安装了 redux-thunk 包，并在创建 Redux store 时应用了它。

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

1. action creator 未返回函数：确保你的 action creator 在需要处理异步逻辑时返回一个函数。

// 错误的 action creator
const fetchData = () => {
  // 这里应该是异步操作，但返回的是一个对象而不是函数
  return { type: 'FETCH_DATA' };
};

// 正确的 action creator
const fetchData = () => async (dispatch, getState) => {
  dispatch({ type: 'FETCH_DATA_REQUEST' });
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
  } catch (error) {
    dispatch({ type: 'FETCH_DATA_FAILURE', error });
  }
};

1. 未正确分发 thunk action：确保你在组件中正确地调用了 thunk action creator。

import { useDispatch } from 'react-redux';
import { fetchData } from './actions';

const MyComponent = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchData());
  }, [dispatch]);

  // ...
};

参考链接

• Redux Thunk 官方文档
• Redux 官方文档