当前位置：首页 > React

react如何集成redux

2026-02-11 23:13:39React

集成 Redux 到 React 的步骤

安装依赖
确保项目已安装 redux 和 react-redux。通过以下命令安装：

npm install redux react-redux

创建 Redux Store
在项目中创建 store.js 文件，初始化 Redux store 并定义 reducer。

import { createStore } from 'redux';

// 初始状态和 reducer
const initialState = { count: 0 };
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

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

使用 Provider 包裹根组件
在应用的入口文件（如 index.js）中，用 react-redux 的 Provider 包裹根组件，并传入 store。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

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

连接组件到 Redux
在需要访问状态的组件中，使用 connect 函数将组件与 Redux store 连接。

import React from 'react';
import { connect } from 'react-redux';

const Counter = ({ count, increment, decrement }) => (
  <div>
    <p>Count: {count}</p>
    <button onClick={increment}>Increment</button>
    <button onClick={decrement}>Decrement</button>
  </div>
);

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

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

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

可选优化：使用 Redux Toolkit

对于更复杂的场景，推荐使用 @reduxjs/toolkit 简化 Redux 逻辑。

安装 Redux Toolkit

npm install @reduxjs/toolkit

重构 Store 和 Reducer
使用 createSlice 自动生成 action creators 和 reducer。

import { configureStore, createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { count: 0 },
  reducers: {
    increment: (state) => { state.count += 1 },
    decrement: (state) => { state.count -= 1 },
  },
});

export const { increment, decrement } = counterSlice.actions;
const store = configureStore({ reducer: counterSlice.reducer });
export default store;

在组件中使用生成的 Actions
通过 useDispatch 和 useSelector 钩子简化代码。

react如何集成redux

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { increment, decrement } from './store';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
};

export default Counter;