关于react中的redux

最新推荐文章于 2025-10-14 15:05:22 发布

原创最新推荐文章于 2025-10-14 15:05:22 发布 · 1.6k 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

什么是redux

Redux 是一个用于管理 JavaScript 应用程序状态的流行库。它为应用程序提供了一个集中式存储（Store）来存放所有的状态数据，并且定义了一系列规则来保证状态的一致性和可预测性。

Redux 主要由三个部分组成：

Store: 存储应用程序状态的地方。
Actions: 表示应用程序中发生的事件或动作的对象。
Reducers: 定义了如何根据 Actions 更新 Store 中的状态的纯函数。

redux的使安装

首先，你需要安装以下库：

redux: Redux 本身。
react-redux: 用于连接 React 组件和 Redux store 的库。
redux-thunk: 一个中间件，允许你在 action 创建函数中执行异步操作。

可以通过 npm 或 yarn 来安装这些库：

1npm install redux react-redux redux-thunk

2. 创建 Actions

Actions 是描述应用程序中发生的具体事件的对象。每个 action 都有一个 type 属性，用来表示发生了什么类型的事件。你还可以添加一个 payload 属性来携带额外的数据。

Javascript

1// actions.js
2export const incrementCounter = () => ({
3  type: 'INCREMENT',
4});
5
6export const decrementCounter = () => ({
7  type: 'DECREMENT',
8});

3. 创建 Reducers

Reducers 是纯函数，它们根据 action 的类型来更新应用程序的状态。每个 reducer 接收当前的状态和一个 action，然后返回新的状态。

Javascript

1// reducers/counterReducer.js
2import { incrementCounter, decrementCounter } from './actions';
3
4const initialState = { count: 0 };
5
6export default function counterReducer(state = initialState, action) {
7  switch (action.type) {
8    case 'INCREMENT':
9      return { ...state, count: state.count + 1 };
10    case 'DECREMENT':
11      return { ...state, count: state.count - 1 };
12    default:
13      return state;
14  }
15}

4. 创建 Store

使用 Redux 的 createStore 函数来创建一个 store，你可以将多个 reducers 合并成一个根 reducer 使用 combineReducers。

Javascript

1// store.js
2import { createStore, combineReducers, applyMiddleware } from 'redux';
3import thunk from 'redux-thunk';
4import counterReducer from './reducers/counterReducer';
5
6const rootReducer = combineReducers({
7  counter: counterReducer,
8});
9
10const store = createStore(
11  rootReducer,
12  applyMiddleware(thunk)
13);
14
15export default store;

5. 使用 `Provider` 包裹应用程序

为了使整个应用程序都能访问到 store，你需要使用 react-redux 的 <Provider> 组件包裹你的根组件。

Javascript

1// index.js
2import React from 'react';
3import ReactDOM from 'react-dom';
4import { Provider } from 'react-redux';
5import store from './store';
6import App from './App';
7
8ReactDOM.render(
9  <Provider store={store}>
10    <App />
11  </Provider>,
12  document.getElementById('root')
13);

6. 连接组件到 Store

你可以使用 react-redux 的 connect 函数或 useSelector 和 useDispatch Hooks 来连接组件和 store。

使用 `connect`

Javascript

1// Counter.js
2import React from 'react';
3import { connect } from 'react-redux';
4import { incrementCounter, decrementCounter } from '../actions';
5
6const Counter = ({ count, onIncrement, onDecrement }) => (
7  <div>
8    <button onClick={onIncrement}>+</button>
9    <span>{count}</span>
10    <button onClick={onDecrement}>-</button>
11  </div>
12);
13
14const mapStateToProps = state => ({
15  count: state.counter.count,
16});
17
18const mapDispatchToProps = dispatch => ({
19  onIncrement: () => dispatch(incrementCounter()),
20  onDecrement: () => dispatch(decrementCounter()),
21});
22
23export default connect(mapStateToProps, mapDispatchToProps)(Counter);

使用 `useSelector` 和 `useDispatch`

Javascript

1// Counter.js
2import React from 'react';
3import { useSelector, useDispatch } from 'react-redux';
4import { incrementCounter, decrementCounter } from '../actions';
5
6const Counter = () => {
7  const count = useSelector(state => state.counter.count);
8  const dispatch = useDispatch();
9
10  return (
11    <div>
12      <button onClick={() => dispatch(incrementCounter())}>+</button>
13      <span>{count}</span>
14      <button onClick={() => dispatch(decrementCounter())}>-</button>
15    </div>
16  );
17};
18
19export default Counter;