当前位置：首页 > React

react如何结合redux

2026-03-31 01:16:24React

React 结合 Redux 的实现方法

React 和 Redux 结合使用可以更好地管理应用的状态。Redux 提供了一个全局的状态容器，React 则负责渲染界面。以下是具体的实现步骤。

安装依赖

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

npm install redux react-redux

创建 Redux Store

在项目中创建一个 Redux Store，用于存储全局状态。通常会在 src/store.js 或类似文件中定义。

import { createStore } from 'redux';

// 初始状态
const initialState = {
  count: 0,
};

// Reducer 函数
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;
  }
};

// 创建 Store
const store = createStore(reducer);

export default store;

使用 Provider 包裹应用

在应用的根组件（通常是 App.js 或 index.js）中，使用 react-redux 的 Provider 组件将 Redux 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 状态

通过 react-redux 的 useSelector 钩子访问 Redux 状态，使用 useDispatch 钩子分发动作。

react如何结合redux

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

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

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
}

export default Counter;

使用 Action Creators

为了更好的可维护性，可以将动作类型和动作创建函数单独定义。

// actions.js
export const increment = () => ({
  type: 'INCREMENT',
});

export const decrement = () => ({
  type: 'DECREMENT',
});

在组件中引入并使用：

import { increment, decrement } from './actions';

// 在组件中分发动作
dispatch(increment());
dispatch(decrement());

结合 Redux Toolkit 简化流程

Redux Toolkit 是 Redux 官方推荐的工具库，可以进一步简化代码。

react如何结合redux

安装 Redux Toolkit：

npm install @reduxjs/toolkit

使用 createSlice 定义 Reducer 和 Action：

import { 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;
export default counterSlice.reducer;

创建 Store 时使用 configureStore：

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;