当前位置：首页 > React

react如何使用redux

2026-01-15 09:36:21React

使用 Redux 在 React 中的应用

Redux 是一个状态管理库，通常与 React 结合使用以管理全局状态。以下是具体实现步骤：

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

npm install redux react-redux

创建 Redux Store 在 store.js 中定义 Redux store：

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;

在 React 中集成 Redux 在根组件（如 App.js）中使用 Provider 包裹应用：

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

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

export default App;

连接组件与 Redux 在组件中使用 connect 或 Hooks（如 useSelector 和 useDispatch）访问 Redux 状态：

方法 1：使用 connect

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

const Counter = ({ count, increment, decrement }) => {
  return (
    <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);

方法 2：使用 Hooks

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

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

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

export default Counter;

异步操作处理

如需处理异步逻辑（如 API 调用），可使用 redux-thunk 或 redux-saga。以下是 redux-thunk 的示例：

安装 redux-thunk

npm install redux-thunk

配置 Store 修改 store.js：

import { createStore, applyMiddleware } 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((res) => res.json())
      .then((data) => dispatch({ type: 'SET_DATA', payload: data }));
  };
};