如何使用redux saga从api抓取中获取特定字段

npm install redux-saga

import { takeLatest, call, put } from 'redux-saga/effects';
import { fetchApiDataSuccess, fetchApiDataFailure } from './actions';

// 定义一个异步函数，用于获取 API 数据
function* fetchApiData() {
  try {
    const response = yield call(fetch, 'API_URL');
    const data = yield response.json();
    const specificField = data.specificField; // 获取特定字段

    yield put(fetchApiDataSuccess(specificField));
  } catch (error) {
    yield put(fetchApiDataFailure(error));
  }
}

// 监听特定的 action，当该 action 被 dispatch 时，执行 fetchApiData 函数
function* watchFetchApiData() {
  yield takeLatest('FETCH_API_DATA', fetchApiData);
}

// 导出根 Saga
export default function* rootSaga() {
  yield all([
    watchFetchApiData(),
    // 其他 Sagas...
  ]);
}

export const fetchApiData = () => ({
  type: 'FETCH_API_DATA',
});

export const fetchApiDataSuccess = (data) => ({
  type: 'FETCH_API_DATA_SUCCESS',
  payload: data,
});

export const fetchApiDataFailure = (error) => ({
  type: 'FETCH_API_DATA_FAILURE',
  payload: error,
});

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

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_API_DATA':
      return {
        ...state,
        loading: true,
        error: null,
      };
    case 'FETCH_API_DATA_SUCCESS':
      return {
        ...state,
        specificField: action.payload,
        loading: false,
      };
    case 'FETCH_API_DATA_FAILURE':
      return {
        ...state,
        error: action.payload,
        loading: false,
      };
    default:
      return state;
  }
};

export default reducer;

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootSaga from './sagas';
import reducer from './reducers';

const sagaMiddleware = createSagaMiddleware();

const store = createStore(reducer, applyMiddleware(sagaMiddleware));

sagaMiddleware.run(rootSaga);

// 其他应用程序的初始化代码...

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchApiData } from './actions';

const MyComponent = () => {
  const dispatch = useDispatch();
  const specificField = useSelector((state) => state.specificField);
  const loading = useSelector((state) => state.loading);
  const error = useSelector((state) => state.error);

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

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return <div>Specific Field: {specificField}</div>;
};

export default MyComponent;