Redux 是一个流行的 JavaScript 应用程序状态管理工具，它可以使你构建可预测的、易于测试的、可扩展的、可维护的应用程序。其中一个常见的用例是实现导航面包屑（Breadcrumb Navigation）功能。本文将介绍如何使用 Redux 实现面包屑导航。
什么是面包屑导航
面包屑导航（Breadcrumb Navigation）是一种网站或应用程序中的导航元素，用于显示当前位置和可用页面路径。它通常位于页面的顶部或底部，可以让用户快速了解他们所处的目录结构，以及他们可以用哪些链接进一步导航。
以下是一个面包屑导航的示例：
Home > Products > Accessories > Bags > Backpacks
Redux 的基础知识
在继续深入研究面包屑导航如何使用 Redux 实现之前，让我们回顾一下 Redux 的基础知识。
Redux 核心概念
Redux 主要由三个核心概念组成：store、action 和 reducer。
- store：存放应用程序的状态数据，以及操作状态数据的方法。
- action：描述应用程序中发生的事件，形式为一个纯 JavaScript 对象，其中必须包含一个 type 属性。
- reducer：根据 action 中的 type 属性以及携带的数据，更新应用程序的状态数据，返回新的状态数据。
Redux 工作流程
Redux 工作流程如下：
- 应用程序通过从它的视图中调用 store.dispatch(action) 来 dispatch action。
- Redux store 通过将 action 传递给 reducer 来调用 reducer。
- Reducer 根据 action 的 type 属性以及携带的数据来更新应用程序的状态数据，返回新的状态数据。
- Redux store 使用新的状态数据更新本地存储，并通知所有注册的监听器（通过 store.subscribe(listener) 方法注册）收到了最新的状态数据。
- 视图重新渲染并显示新的状态数据。
面包屑导航的实现
面包屑导航的实现需要以下步骤：
- 定义 action 类型
- 定义 action 创建函数
- 定义 reducer
- 定义初始化 state
- 更新 state
定义 action 类型
在 Redux 中，action 所有的操作都依赖于 type 属性，我们需要定义面包屑导航的一系列类型。
export const ADD_CRUMB = 'ADD_CRUMB' export const REMOVE_CRUMB = 'REMOVE_CRUMB' export const SET_CRUMBS = 'SET_CRUMBS'
定义 action 创建函数
接下来，我们需要定义一些 action 创建函数，这些函数会被调用来 dispatch action，并传递一些数据给 reducer。
-- -------------------- ---- ------- ------ -------- --------------- ----- - ------ - ----- ---------- ------ ---- - - ------ -------- ------------------ - ------ - ----- ------------- ----- - - ------ -------- ----------------- - ------ - ----- ----------- ------ - -
定义 reducer
接下来，我们需要编写一个 reducer 函数，用于更新应用程序的状态数据。
-- -------------------- ---- -------
----- ------------ - --
------ ------- -------- ------------------------ - ------------- ------- -
------ ------------- -
---- ----------
------ ---------- - ------ ------------- ----- ----------- --
---- -------------
------ -------------- -------------
---- -----------
------ -------------
--------
------ -----
-
-其中 initialState 定义了初始的状态数据。breadcrumbsReducer 是一个纯函数，它接收当前状态和 action，并返回新的状态数据。
定义初始化 state
接下来，我们需要在我们的应用程序中初始化 Redux store。在这个实例中，我们将使用 createStore 函数和我们刚刚定义的 breadcrumbsReducer 函数来创建一个 store。
import { createStore } from 'redux'
import breadcrumbsReducer from './breadcrumbsReducer'
const store = createStore(breadcrumbsReducer)更新 state
现在，我们已经定义了所有必要的元素，我们将在我们的应用程序中使用 Redux 来更新状态并从中获取新的导航数据。
-- -------------------- ---- ------- ------ - --------- ------------ --------- - ---- ---------------------- ------ ----- ---- -------------------- -- ------- ------------------------------- ----- -- ------------- --------- ----------------------------------- ------------- -- ------------- --------------------- -------------------------------------- ------------------------- -- ------------- -------------------------- ------------------------------- ------------------------------ -- ------------- ------------------------------------ ------------------------------------ ---------------------------------------- -- ----------------- ------------------------------ -- ----------- ---- - -------- - ----------- - ---- -------------------------- - ------ ------- ----- --- -- - ------ ----------- ----- ----------- -- - ------ -------------- ----- ----------------------- -- - ------ ------- ----- ---------------------------- - ---
结论
在本文中，我们介绍了面包屑导航是什么以及如何使用 Redux 来实现它。通过理解 Redux 的核心概念，并遵循一些最佳实践，我们可以使用 Redux 轻松地管理我们的应用程序状态，从而实现一些有用的功能。在下一篇教程中，我们将介绍 Redux 中更高级的用例和技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674e9b1fe884a3e30f288779