You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React-Redux能否不依赖react-saga或react-thunk?无此类中间件是否为最佳实践?

React-Redux Without Thunk/Saga: Is It Possible & Is It a Best Practice?

Can you use React-Redux without redux-thunk or redux-saga?

Absolutely! Redux’s core functionality works perfectly fine without these async-focused middleware.

Redux’s default setup only allows action creators to return plain JavaScript objects (sync actions). Middleware like thunk or saga exists to extend Redux’s capabilities to handle asynchronous logic (like API calls, timers, or delayed actions). If your application doesn’t need to perform any async operations—for example, it only handles state updates based on user interactions like button clicks or form inputs—you don’t need these middleware at all.

Your existing code is a great example of a valid React-Redux setup without thunk/saga:

import React from 'react';
import ReactDOM from 'react-dom';
import allReducers from './app/reducers/index';
import Header from './app/components/header';
import './index.css';
import { createStore, applyMiddleware } from 'redux';
import logger from 'redux-logger';
import { Provider } from 'react-redux';
import registerServiceWorker from './registerServiceWorker';

const store = createStore(allReducers, {}, applyMiddleware(logger));

ReactDOM.render(
  <Provider store={store}>
    <Header />
  </Provider>,
  document.getElementById('root')
);
registerServiceWorker();

Here, you’re using redux-logger (a middleware for logging state changes) but no async middleware—and this will work perfectly for a sync-only application.

Is avoiding thunk/saga a best practice?

This depends entirely on your application’s needs:

  • Best practice if you have no async logic: If your app doesn’t need to handle API calls, timers, or other async operations, skipping thunk/saga is absolutely the right choice. It keeps your dependency list small, your codebase simpler, and avoids unnecessary complexity.
  • Not a best practice if you have async logic: If you do need to handle async operations, avoiding these middleware will force you to manage async code directly in your components (e.g., making API calls in useEffect or class lifecycle methods). This can lead to bloated components, duplicated logic, and harder-to-maintain code. In this case, using a middleware like thunk (simple, lightweight) or saga (more powerful for complex async flows) is the standard best practice to keep your async logic centralized and testable.

Quick note for your current setup

Your code is totally valid as-is. If you later need to add async functionality, you can easily integrate thunk or saga by updating your createStore call to include the middleware—no need to rewrite your existing sync logic.

内容的提问来源于stack exchange,提问作者Kanishka

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.15 03:18:28