引导者

# Redux原理## 简介Redux 是一种用于 JavaScript 应用的状态管理库，特别适用于 React.js。它提供了一种可预测的方式来组织应用的状态管理，使得代码更加易于测试和维护。Redux 的核心理念是单一数据源（Single Source of Truth），即整个应用的状态都存储在一个对象中。## 基本概念### StoreStore 是保存应用状态的容器，也是唯一的数据源。在 Redux 中，通过 `createStore` 函数创建 store 对象。store 会包含以下方法：- `getState()`：获取当前 state。 - `dispatch(action)`：将 action 发送给 reducer。 - `subscribe(listener)`：订阅监听器，当 state 改变时执行回调函数。### ActionAction 是一个普通的 JavaScript 对象，用来描述发生了什么。每个 action 必须有一个 `type` 属性，表示动作类型。可以使用 `actionCreator` 来创建 action。### ReducerReducer 是一个纯函数，接收当前的 state 和 action 作为参数，返回新的 state。reducer 不能直接修改传入的 state，而是返回一个新的 state 对象。可以使用 `combineReducers` 函数来组合多个 reducer。## 核心原则### 单一数据源Redux 应用只有一个单一的 store，所有的 state 都保存在这个 store 里。### 状态不可变Redux 中的 state 是不可变的。每次 state 更新时，都会生成一个新的 state 对象，而不是直接修改原来的 state。### 只有纯函数能改变状态Reducer 是一个纯函数，不会有任何副作用。Reducer 接收当前的 state 和一个 action，然后返回一个新的 state。Reducer 不应该做任何异步操作或 API 调用。## 工作流程1.

触发 Action

：当用户与界面交互时（例如点击按钮），会触发一个 action。 2.

分发 Action

：通过 `store.dispatch(action)` 将 action 发送到 store。 3.

Reducer 处理 Action

：store 接收到 action 后，会调用对应的 reducer 函数处理这个 action，并生成新的 state。 4.

更新 UI

：store 使用新的 state 更新 UI，通常是通过订阅 `store.subscribe()` 监听 state 的变化。## 示例代码```javascript // 定义一个简单的 action const ADD_TODO = 'ADD_TODO'; const addTodo = (text) => ({type: ADD_TODO,text });// 定义一个简单的 reducer const initialState = { todos: [] }; const todoReducer = (state = initialState, action) => {switch (action.type) {case ADD_TODO:return { ...state, todos: [...state.todos, action.text] };default:return state;} };// 创建 store import { createStore } from 'redux'; const store = createStore(todoReducer);// 触发 action 并分发 store.dispatch(addTodo('Learn Redux')); console.log(store.getState()); ```## 总结Redux 提供了一种集中式管理状态的方式，使得应用的状态管理变得更加清晰和可控。通过遵循 Redux 的核心原则，开发者能够更好地理解和维护应用的状态逻辑。

Redux原理

简介Redux 是一种用于 JavaScript 应用的状态管理库，特别适用于 React.js。它提供了一种可预测的方式来组织应用的状态管理，使得代码更加易于测试和维护。Redux 的核心理念是单一数据源（Single Source of Truth），即整个应用的状态都存储在一个对象中。

基本概念

StoreStore 是保存应用状态的容器，也是唯一的数据源。在 Redux 中，通过 `createStore` 函数创建 store 对象。store 会包含以下方法：- `getState()`：获取当前 state。 - `dispatch(action)`：将 action 发送给 reducer。 - `subscribe(listener)`：订阅监听器，当 state 改变时执行回调函数。

ActionAction 是一个普通的 JavaScript 对象，用来描述发生了什么。每个 action 必须有一个 `type` 属性，表示动作类型。可以使用 `actionCreator` 来创建 action。

ReducerReducer 是一个纯函数，接收当前的 state 和 action 作为参数，返回新的 state。reducer 不能直接修改传入的 state，而是返回一个新的 state 对象。可以使用 `combineReducers` 函数来组合多个 reducer。

核心原则

单一数据源Redux 应用只有一个单一的 store，所有的 state 都保存在这个 store 里。

状态不可变Redux 中的 state 是不可变的。每次 state 更新时，都会生成一个新的 state 对象，而不是直接修改原来的 state。

只有纯函数能改变状态Reducer 是一个纯函数，不会有任何副作用。Reducer 接收当前的 state 和一个 action，然后返回一个新的 state。Reducer 不应该做任何异步操作或 API 调用。

工作流程1. **触发 Action**：当用户与界面交互时（例如点击按钮），会触发一个 action。 2. **分发 Action**：通过 `store.dispatch(action)` 将 action 发送到 store。 3. **Reducer 处理 Action**：store 接收到 action 后，会调用对应的 reducer 函数处理这个 action，并生成新的 state。 4. **更新 UI**：store 使用新的 state 更新 UI，通常是通过订阅 `store.subscribe()` 监听 state 的变化。

示例代码```javascript // 定义一个简单的 action const ADD_TODO = 'ADD_TODO'; const addTodo = (text) => ({type: ADD_TODO,text });// 定义一个简单的 reducer const initialState = { todos: [] }; const todoReducer = (state = initialState, action) => {switch (action.type) {case ADD_TODO:return { ...state, todos: [...state.todos, action.text] };default:return state;} };// 创建 store import { createStore } from 'redux'; const store = createStore(todoReducer);// 触发 action 并分发 store.dispatch(addTodo('Learn Redux')); console.log(store.getState()); ```

总结Redux 提供了一种集中式管理状态的方式，使得应用的状态管理变得更加清晰和可控。通过遵循 Redux 的核心原则，开发者能够更好地理解和维护应用的状态逻辑。