在 web 应用中，搜索功能是必不可少的。然而，搜索功能实现起来有一定的难度，在使用 Redux 管理状态的同时，保持搜索功能的高效性和性能也是需要考虑的。在本文中，我们将详细探讨在 Redux 中如何处理搜索功能。
Redux 中的概念
在开始探讨搜索功能的实现，首先需要了解一些 Redux 中的概念。
Action
Action 代表着一个要执行的动作，它是一个包含 type 属性的普通对象。例如：
{ type: 'ADD_TODO', payload: { id: 1, text: 'Learn Redux' } }
Reducer
Reducer 是更新应用状态的函数。它接收当前状态和一个 action 对象作为参数，返回一个新的状态。例如：
function todosReducer(state = [], action) { switch (action.type) { case 'ADD_TODO': return [...state, action.payload]; default: return state; } }
Store
Store 是将应用程序的状态保存在一个地方的对象。它将应用程序中的所有状态保存在一个称为 state 的单一对象中，并在状态更改时向所有订阅者发出通知。例如：
import { createStore } from 'redux'; import todosReducer from './reducers/todosReducer'; const store = createStore(todosReducer);
搜索功能的实现
理解 Redux 的概念之后，我们可以开始探讨在 Redux 中实现搜索功能。以下是搜索功能的基本实现步骤：
- 添加搜索框组件。使用 React 组件添加一个表单，该表单包含一个输入框和一个按钮，用户可在输入框中输入搜索关键字。
- 创建搜索 action。在 Redux 中，搜索操作表示为一个 action。搜索 action 包含两个属性：type 和 payload。type 属性表示 action 的类型，payload 包含搜索结果的数据。
- 编写 reducer 处理搜索 action。在 reducer 中，我们应该将搜索结果添加到 searchResult 状态属性中。
- 使用搜索结果更新组件。在触发搜索 action 后，应该将搜索结果保存到 Redux store。然后，使用 React 组件更新页面以显示搜索结果。
搜索框组件的实现
在我们的示例应用中，搜索框组件包括一个输入框和一个按钮，代码如下：
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ------ - ----------- - ---- -------------- ------ - ------------ - ---- ------------ -------- ----------- - ----- ------------ -------------- - ------------- ----- -------- - -------------- -------- ------------------- - ----------------------- ----------------------------------- - ------ - ----- ------------------------ ------ ----------------- ------------------ ----------- -- ------------------------------ -- ------- ----------------------------- ------- -- - ------ ------- ----------展开代码
搜索 action 的实现
定义搜索 action 的代码如下：
-- -------------------- ---- ------- ------ ----- ------ - --------- ------ -------- ------------------------ - ------ - ----- ------- -------- - ----------- ---------- - -- -展开代码
reducer 的实现
我们的 reducer 应该将搜索结果保存在 searchResults 属性中。下面是这个 reducer 的代码：
-- -------------------- ---- ------- ------ - ------ - ---- ------------- -------- ------------------- - --- ------- - ------ ------------- - ---- ------- -- -------------------- ----- ------------ - --- -- ------ ------ - --------- -------------- ------------ -- -------- ------ ------ - - ------ ------- --------------展开代码
组件更新
最后，请确保你使用刚刚取得的搜索结果来更新你的 UI。使用 React 组件更新页面以显示新的搜索结果，并确保在使用 state（即我们的 store）时使用单一值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bd3f9fa231b2b7edf762c7
