当前位置：首页 > React

react如何集成redux

2026-02-26 09:08:18React

集成 Redux 到 React 的步骤

安装依赖包 确保项目中已安装 redux 和 react-redux，运行以下命令：

npm install redux react-redux

创建 Redux Store 在 store.js 中定义全局状态和 reducer：

import { createStore } from 'redux';

const initialState = {
  counter: 0
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, counter: state.counter + 1 };
    default:
      return state;
  }
};

const store = createStore(reducer);
export default store;

使用 Provider 包裹根组件 在入口文件（如 index.js）中，将根组件包裹在 Provider 中并传入 store：

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

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

在组件中连接 Redux 通过 connect 或 Hooks（如 useSelector 和 useDispatch）访问状态和派发动作。

方法 1：使用 connect

import { connect } from 'react-redux';

const Counter = ({ counter, increment }) => (
  <div>
    <p>{counter}</p>
    <button onClick={increment}>+</button>
  </div>
);

const mapStateToProps = (state) => ({
  counter: state.counter
});

const mapDispatchToProps = (dispatch) => ({
  increment: () => dispatch({ type: 'INCREMENT' })
});

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

方法 2：使用 Hooks

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

const Counter = () => {
  const counter = useSelector((state) => state.counter);
  const dispatch = useDispatch();

  return (
    <div>
      <p>{counter}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
    </div>
  );
};

export default Counter;

处理异步操作（可选）

如需异步逻辑（如 API 调用），可集成 redux-thunk 或 redux-saga。

安装 redux-thunk

npm install redux-thunk

配置中间件 修改 store.js：

import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';

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

定义异步 Action

const fetchData = () => {
  return (dispatch) => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => dispatch({ type: 'SET_DATA', payload: data }));
  };
};

通过以上步骤，Redux 即可在 React 中完成集成，实现状态管理和数据流控制。

react如何集成redux