当前位置：首页 > React

react redux如何使用

2026-02-12 07:05:50React

React Redux 使用指南

React Redux 是 React 应用中管理全局状态的常用工具库，以下是核心使用方法和步骤：

安装依赖

确保项目已安装 react-redux 和 redux：

npm install redux react-redux

创建 Redux Store

在 store.js 中配置 Redux Store：

import { createStore } from 'redux';

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

// Reducer 函数
const rootReducer = (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(rootReducer);
export default store;

提供 Store 给 React 应用

在根组件（如 App.js）中使用 Provider：

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

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

组件中访问状态和派发动作

使用 useSelector 和 useDispatch Hooks：

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

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

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

异步操作处理（使用 Redux Thunk）

安装中间件并配置 Store：

npm install redux-thunk

更新 store.js：

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

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

定义异步 Action：

const asyncIncrement = () => {
  return (dispatch) => {
    setTimeout(() => {
      dispatch({ type: 'INCREMENT' });
    }, 1000);
  };
};

// 在组件中调用
dispatch(asyncIncrement());

组织代码结构（模块化）

建议按功能拆分 Reducer 和 Action：

actions/counter.js：定义 Action Creators
reducers/counter.js：定义子 Reducer

使用 combineReducers 合并 Reducer：


import { combineReducers } from 'redux';
import counterReducer from './reducers/counter';

const rootReducer = combineReducers({ counter: counterReducer, });


---

### 开发者工具集成
安装 Redux DevTools 扩展，并配置 Store：
```javascript
const store = createStore(
  rootReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

通过以上步骤，可以快速在 React 应用中集成 Redux 进行状态管理。实际开发中可根据项目复杂度进一步优化代码结构。

react redux如何使用