当前位置：首页 > React

react如何使用redux

2026-02-11 18:27:41React

使用 Redux 在 React 中的步骤

安装依赖

确保项目中已安装 Redux 和 React-Redux。通过以下命令安装：

npm install redux react-redux

创建 Redux Store

创建一个 Redux store 来管理应用状态。通常在 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;

提供 Store 给 React 组件

使用 Provider 将 store 提供给整个应用。在入口文件（如 index.js）中：

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

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

连接组件到 Redux

使用 connect 或 Hooks（如 useSelector 和 useDispatch）将组件连接到 Redux store。

react如何使用redux

使用 connect：

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

const Counter = ({ count, increment, decrement }) => {
  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</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);

使用 Hooks：

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

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

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

export default Counter;

异步操作（可选）

如需处理异步操作（如 API 调用），可使用 Redux Thunk 或 Redux Saga。以 Redux Thunk 为例：

react如何使用redux

安装 Thunk：
```
npm install redux-thunk
```

修改 store.js：


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

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


3. 定义异步 action：
```javascript
const fetchData = () => {
  return (dispatch) => {
    fetch('https://api.example.com/data')
      .then((res) => res.json())
      .then((data) => dispatch({ type: 'SET_DATA', payload: data }));
  };
};