当前位置：首页 > React

react如何传递redux

2026-02-26 13:04:37React

在 React 中传递 Redux

Redux 是一个状态管理库，用于管理 React 应用中的全局状态。传递 Redux 通常涉及设置 store、连接组件以及分发 action。

安装必要的依赖

确保项目中已安装 Redux 和 React-Redux：

npm install redux react-redux

创建 Redux Store

在应用中创建一个 Redux store，通常在一个单独的文件中（如 store.js）：

import { createStore } from 'redux';
import rootReducer from './reducers'; // 假设已定义 rootReducer

const store = createStore(rootReducer);

export default store;

使用 Provider 包裹应用

在应用的顶层组件（如 App.js 或 index.js）中，使用 Provider 将 store 传递给整个应用：

import { Provider } from 'react-redux';
import store from './store';

function App() {
  return (
    <Provider store={store}>
      {/* 其他组件 */}
    </Provider>
  );
}

连接组件到 Redux

使用 connect 函数或 useSelector 和 useDispatch 钩子将组件连接到 Redux store。

使用 `connect`（类组件）

import { connect } from 'react-redux';

class MyComponent extends React.Component {
  render() {
    return <div>{this.props.someState}</div>;
  }
}

const mapStateToProps = (state) => ({
  someState: state.someReducer.someState,
});

const mapDispatchToProps = (dispatch) => ({
  someAction: () => dispatch({ type: 'SOME_ACTION' }),
});

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

使用 `useSelector` 和 `useDispatch`（函数组件）

import { useSelector, useDispatch } from 'react-redux';

function MyComponent() {
  const someState = useSelector((state) => state.someReducer.someState);
  const dispatch = useDispatch();

  return (
    <div>
      {someState}
      <button onClick={() => dispatch({ type: 'SOME_ACTION' })}>Click</button>
    </div>
  );
}

分发 Action

Action 是改变 Redux store 的唯一方式。可以通过 dispatch 分发 action：

dispatch({ type: 'SOME_ACTION', payload: data });

使用中间件（如 Redux Thunk）

如果需要处理异步操作，可以安装 Redux Thunk：

npm install redux-thunk

然后在创建 store 时应用中间件：

react如何传递redux

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

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

通过以上步骤，可以在 React 应用中成功传递和使用 Redux。