redux-saga中优化call调用方式咨询：react-boiler-plate下axios请求简化

Great question! Let’s break down how to clean up your redux-saga axios calls—no more clunky () => wrappers—while aligning with react-boilerplate’s best practices.

Optimizing Axios GET Requests #

First off: you don’t need those arrow function wrappers at all! Redux-Saga’s call effect is built to accept a function as its first argument, followed by any parameters that function requires. Since axios methods like get are just regular functions, we can pass them directly to call along with their arguments.

Instead of this:

// ❌ Unnecessary wrapper function
yield call(() => axios.get('/api/posts', { headers: { Authorization: 'Bearer token' } }));

Do this:

// ✅ Clean, direct call
yield call(axios.get, '/api/posts', {
  headers: { Authorization: 'Bearer token' },
  params: { page: 1, limit: 10 } // Query params live here
});

React Boilerplate Context #

In react-boilerplate, it’s standard practice to create a centralized API client (instead of using raw axios) to handle base URLs, auth tokens, and interceptors consistently. For example, create src/utils/apiClient.js:

import axios from 'axios';

const apiClient = axios.create({
  baseURL: process.env.REACT_APP_API_URL,
  headers: { 'Content-Type': 'application/json' }
});

// Auto-inject auth tokens into every request
apiClient.interceptors.request.use(config => {
  const token = localStorage.getItem('authToken');
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

export default apiClient;

Then in your saga, import this client and call its get method directly:

import apiClient from '../utils/apiClient';

function* fetchPostsSaga() {
  try {
    const response = yield call(apiClient.get, '/posts', { params: { page: 1 } });
    yield put(fetchPostsSuccess(response.data));
  } catch (error) {
    yield put(fetchPostsFailure(error.message));
  }
}

Handling Axios POST Requests #

The same logic applies to POST calls. Ditch the wrapper:

// ❌ Wrapped POST call
yield call(() => axios.post('/api/posts', { title: 'New Post', content: 'Hello World' }));

Replace it with a direct call that includes the URL, request body, and optional config:

// ✅ Direct POST call
const postData = { title: 'New Post', content: 'Hello World' };
yield call(axios.post, '/api/posts', postData, {
  headers: { 'X-Custom-Header': 'value' }
});

Using the centralized API client in react-boilerplate:

function* createPostSaga({ payload: postData }) {
  try {
    const response = yield call(apiClient.post, '/posts', postData);
    yield put(createPostSuccess(response.data));
  } catch (error) {
    yield put(createPostFailure(error.response?.data?.message || error.message));
  }
}

Key Takeaways #

• Redux-Saga’s call effect accepts a function + its arguments directly—no arrow function wrappers needed
• For axios get: call(axios.get, url, config) (config includes headers, query params, etc.)
• For axios post: call(axios.post, url, requestBody, config)
• In react-boilerplate, centralizing your API client makes sagas cleaner, reduces duplication, and simplifies auth/error handling across your app

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