当前位置：首页 > React

react中间件如何加

2026-01-25 13:52:07React

在React中添加中间件的方法

React本身不直接提供中间件机制，但可以通过React生态中的工具（如Redux）或自定义高阶组件实现类似功能。以下是几种常见实现方式：

使用Redux中间件

Redux提供中间件机制，允许在action和reducer之间插入自定义逻辑。

安装Redux和中间件相关库：

npm install redux react-redux redux-thunk

创建store时应用中间件（以redux-thunk为例）：

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

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

自定义中间件示例：

const loggerMiddleware = store => next => action => {
  console.log('Dispatching:', action);
  const result = next(action);
  console.log('New state:', store.getState());
  return result;
};

自定义高阶组件（HOC）

通过高阶组件包装组件实现中间件逻辑：

function withLogger(WrappedComponent) {
  return function(props) {
    console.log('Rendering:', WrappedComponent.name);
    return <WrappedComponent {...props} />;
  };
}

// 使用方式
const EnhancedComponent = withLogger(MyComponent);

使用React Router中间件

在路由层面添加中间件逻辑：

import { Route, Redirect } from 'react-router-dom';

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      isAuthenticated ? (
        <Component {...props} />
      ) : (
        <Redirect to="/login" />
      )
    }
  />
);

使用自定义Hook实现

React Hook也可以实现类似中间件的功能：

function useRequestLogger() {
  useEffect(() => {
    const interceptor = axios.interceptors.request.use(config => {
      console.log('Request:', config);
      return config;
    });

    return () => {
      axios.interceptors.request.eject(interceptor);
    };
  }, []);
}