react thunk 如何使用

安装 Redux Thunk

确保项目中已安装 redux-thunk 和 redux。通过 npm 或 yarn 安装：

npm install redux-thunk redux

配置 Redux Store

在创建 Redux store 时，使用 applyMiddleware 将 thunk 作为中间件注入：

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

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

编写 Thunk Action

Thunk action 是一个返回函数的函数，接收 dispatch 和 getState 作为参数。常用于异步操作（如 API 调用）：

const fetchUserData = (userId) => {
  return async (dispatch, getState) => {
    dispatch({ type: 'FETCH_USER_REQUEST' });
    try {
      const response = await fetch(`https://api.example.com/users/${userId}`);
      const data = await response.json();
      dispatch({ type: 'FETCH_USER_SUCCESS', payload: data });
    } catch (error) {
      dispatch({ type: 'FETCH_USER_FAILURE', error: error.message });
    }
  };
};

在组件中 Dispatch Thunk

在 React 组件中，通过 useDispatch 或 connect 分发 thunk action：

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

function UserComponent({ userId }) {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(fetchUserData(userId));
  }, [userId, dispatch]);
  return <div>Loading user data...</div>;
}

处理异步状态

在 reducer 中根据 action 类型更新状态，通常包含加载、成功和错误状态：

const initialState = {
  loading: false,
  user: null,
  error: null,
};

function userReducer(state = initialState, action) {
  switch (action.type) {
    case 'FETCH_USER_REQUEST':
      return { ...state, loading: true };
    case 'FETCH_USER_SUCCESS':
      return { ...state, loading: false, user: action.payload };
    case 'FETCH_USER_FAILURE':
      return { ...state, loading: false, error: action.error };
    default:
      return state;
  }
}

结合 Redux DevTools

如需使用 Redux DevTools 扩展，需在 store 创建时组合中间件：

import { composeWithDevTools } from 'redux-devtools-extension';

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