理解 Redux：深入了解其内部工作原理-js教程-PHP中文网

理解 Redux：深入了解其内部工作原理

PHPz

发布： 2024-08-22 18:45:33

原创

341 人浏览过

Understanding Redux: A Deep Dive into Its Inner Workings

什么是 Redux？

Redux 是 JavaScript 应用程序的可预测状态容器。它可以帮助您在不同的环境中以一致的方式管理应用程序的状态，无论它是在客户端、服务器甚至本机环境中运行。 Redux 基于这样的理念：应用程序的整个状态应该在单一事实来源中进行管理：商店。

Redux 的关键概念

要了解 Redux 的工作原理，我们来分解其核心概念：

Store：商店是应用程序状态的中央存储库。它保存应用程序的整个状态树。 Redux 应用程序中只有一个 store。
Actions：动作是纯 JavaScript 对象，表示更改状态的意图。它们必须具有指示正在执行的操作类型的类型属性。或者，它们还可以包含附加数据，称为有效负载，提供有关操作的更多信息。
Reducers：Reducers 是纯函数，它将当前状态和操作作为参数并返回新状态。它们指定应用程序的状态如何响应操作而变化。由于减速器是纯函数，因此它们不会改变现有状态，而是返回一个新的状态对象。
Dispatch：dispatch函数用于将action发送到store。分派操作时，存储会运行减速器以根据当前状态和操作计算新状态。
选择器：选择器是从存储中提取和返回特定状态片段的函数。它们有助于封装访问状态的逻辑，使您的代码更加模块化并且更易于测试。

Redux 的工作原理：分步流程

要了解 Redux 的工作原理，让我们看一下 Redux 支持的应用程序中状态更改的典型流程。

调度操作：当应用程序中发生某些事情（例如，用户单击按钮）时，就会调度一个操作。这个动作是一个简单的对象，描述发生了什么，通常包含一个类型和一些有效负载。
```
const incrementAction = {
  type: 'INCREMENT',
  payload: 1
};

store.dispatch(incrementAction);
```
登录后复制

Reducer 处理 Action：store 将分派的 Action 和当前状态发送给Reducer。然后，reducer 根据操作类型确定应如何更新状态。

function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + action.payload };
    default:
      return state;
  }
}

登录后复制

Store 更新 State：reducer 返回一个新的状态对象，该对象替换 Store 中的旧状态。然后，存储会通知所有订阅的组件状态更改。
组件重新渲染：任何订阅状态更新的组件都将重新渲染以反映新状态。
```
function mapStateToProps(state) {
  return {
    count: state.count
  };
}
```
登录后复制

Redux 中的中间件

Redux 中的中间件允许您使用自定义功能扩展 Redux。中间件可以在操作到达减速器之前拦截操作，并可以执行日志记录、错误报告或发出异步请求等任务。

最流行的中间件之一是 redux-thunk，它允许您编写返回函数而不是操作的操作创建器。这对于处理 Redux 中的异步操作特别有用。

const incrementAsync = () => (dispatch) => {
  setTimeout(() => {
    dispatch({ type: 'INCREMENT', payload: 1 });
  }, 1000);
};

store.dispatch(incrementAsync());

登录后复制