当前位置：首页 > news >正文

React--Redux

news 来源：原创 2024/9/20 15:29:08

Redux 是一个用于 JavaScript 应用的状态管理库，特别是在 React 应用中非常流行。下面我将详细介绍一个使用 Redux 的简单案例，包括设置 Redux 环境、创建 store、定义 actions 和 reducers，以及如何连接 React 组件。

步骤 1: 安装依赖

首先，确保你已经安装了 Node.js 和 npm。然后，使用以下命令安装 Redux 和 React-Redux：

npm install redux react-redux

步骤 2: 设置 Redux

创建 Action

Actions 是描述要发生什么的普通对象，通常包含一个 type 字段和可能的其他数据字段。

// src/actions/counterActions.jsexport const increment = () => ({type: 'INCREMENT'
});export const decrement = () => ({type: 'DECREMENT'
});export const reset = () => ({type: 'RESET'
});

创建 Reducer

Reducers 是一个纯函数，接收当前状态和 action，并返回新的状态。

// src/reducers/counterReducer.jsconst initialState = {count: 0
};const counterReducer = (state = initialState, action) => {switch (action.type) {case 'INCREMENT':return { ...state, count: state.count + 1 };case 'DECREMENT':return { ...state, count: state.count - 1 };case 'RESET':return { ...state, count: 0 };default:return state;}
};export default counterReducer;

创建 Store

Store 是 Redux 的核心，保存应用的状态，并提供 dispatch 方法来发送 actions。

// src/store.jsimport { createStore } from 'redux';
import counterReducer from './reducers/counterReducer';const store = createStore(counterReducer);export default store;

步骤 3: 连接 React 和 Redux

提供 Store

使用 Provider 组件将 Redux store 传递到应用的组件树中。

// src/index.jsimport 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')
);

创建组件

在 React 组件中，使用 connect 函数将 Redux store 的 state 和 dispatch 方法映射到组件的 props 上。

// src/App.jsimport React from 'react';
import { connect } from 'react-redux';
import { increment, decrement, reset } from './actions/counterActions';const App = ({ count, increment, decrement, reset }) => {return (<div><h1>Counter: {count}</h1><button onClick={increment}>Increment</button><button onClick={decrement}>Decrement</button><button onClick={reset}>Reset</button></div>);
};// mapStateToProps 函数，映射 state 到组件的 props
const mapStateToProps = state => ({count: state.count
});// mapDispatchToProps 函数，映射 dispatch 到组件的 props
const mapDispatchToProps = {increment,decrement,reset
};export default connect(mapStateToProps, mapDispatchToProps)(App);

关系规则

Redux 核心概念

Store：
- Redux 的核心，保存应用的整个状态树。
- 唯一的状态源，不能直接修改，需通过 action 分发来改变状态。
Action：
- 描述发生了什么的普通 JavaScript 对象。
- 必须包含 type 字段，表示 action 的类型。
Reducer：
- 纯函数，接收当前状态和 action，并返回新的状态。
- 根据 action 的类型决定如何更新状态。
Dispatch：
- Store 的方法，用于发送 action，触发 state 变化。
Connect：
- React-Redux 提供的函数，将 React 组件与 Redux store 连接起来。
- 将 state 和 dispatch 映射到组件的 props 上。

                  +------------+|  Store     |+------+-----+|| dispatch(action)|+------v-----+|  Reducer   |+------+-----+|| new state|+------v-----+|  Component |+------------+

步骤详解

创建 Action：
- Action 是一个描述要发生什么的对象，有一个必需的 type 字段。

// actions/counterActions.js
export const increment = () => ({type: 'INCREMENT'
});export const decrement = () => ({type: 'DECREMENT'
});export const reset = () => ({type: 'RESET'
});

定义 Reducer：

Reducer 是一个纯函数，接收当前状态和 action，并返回新的状态。

// reducers/counterReducer.js
const initialState = {count: 0
};const counterReducer = (state = initialState, action) => {switch (action.type) {case 'INCREMENT':return { ...state, count: state.count + 1 };case 'DECREMENT':return { ...state, count: state.count - 1 };case 'RESET':return { ...state, count: 0 };default:return state;}
};export default counterReducer;

创建 Store：

Store 是应用的状态容器，包含应用的状态和 dispatch 方法

// store.js
import { createStore } from 'redux';
import counterReducer from './reducers/counterReducer';const store = createStore(counterReducer);export default store;

提供 Store 给应用：

使用 Provider 组件将 Redux 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')
);

连接 React 组件与 Redux：

使用 connect 函数将 Redux state 和 dispatch 方法映射到组件的 props 上。

// App.js
import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement, reset } from './actions/counterActions';const App = ({ count, increment, decrement, reset }) => {return (<div><h1>Counter: {count}</h1><button onClick={increment}>Increment</button><button onClick={decrement}>Decrement</button><button onClick={reset}>Reset</button></div>);
};const mapStateToProps = state => ({count: state.count
});const mapDispatchToProps = {increment,decrement,reset
};export default connect(mapStateToProps, mapDispatchToProps)(App);

数据流动过程

用户交互：
- 用户在组件中点击按钮（例如，点击 "Increment" 按钮）。
派发 Action：
- increment 函数被调用，返回一个 action 对象 { type: 'INCREMENT' }，并通过 dispatch 方法派发这个 action。
Reducer 处理 Action：
- Store 收到这个 action，并将其传递给 reducer。
- Reducer 检查 action 的类型（INCREMENT），并根据逻辑返回新的 state。
更新 Store：
- Store 根据 reducer 返回的新 state 更新其内部的 state。
组件重新渲染：
- connect 函数确保组件接收到最新的 state 并重新渲染。