Redux 是一种流行的 JavaScript 应用程序状态管理工具。它的设计目标是让应用程序的状态变得可预测和可控。Redux 的核心概念是 store，它是一个存储应用程序状态的容器。Redux 的另一个重要概念是 reducer，它是一个纯函数，用于处理 store 中的状态变化。在本文中，我们将介绍 Redux 中的一个重要插件 Reselect，并展示如何使用它来处理冗余计算。
什么是 Reselect
Reselect 是一个用于创建可记忆的、高效的、可组合的选择器函数的库。选择器函数是一个纯函数，它接收一个或多个 state 参数，并返回从这些参数中派生的值。Reselect 的主要优点是它能够避免进行冗余计算。当一个选择器函数的输入参数没有改变时，Reselect 会返回缓存的结果，而不是重新计算。
Reselect 的另一个优点是它可以用于组合选择器函数。这使得我们可以将一个复杂的计算任务拆分成多个小的选择器函数，并在需要时组合它们。这种模块化的方法可以使我们更容易地维护代码，并且使代码更可读。
如何使用 Reselect
使用 Reselect 需要进行以下步骤：
安装 Reselect 库。
npm install reselect --save
创建选择器函数。
选择器函数通常是一个纯函数，它接收一个或多个 state 参数，并返回从这些参数中派生的值。例如，假设我们有一个 Redux store，其中包含一个名为 todos 的数组。我们可以编写一个选择器函数，用于计算完成的任务数量。这个选择器函数可以像这样：
import { createSelector } from 'reselect'; const getTodos = state => state.todos; const getCompletedTodosCount = createSelector( [getTodos], todos => todos.filter(todo => todo.completed).length );在这个例子中，我们使用 createSelector 函数创建了一个选择器函数 getCompletedTodosCount。这个函数接收一个名为 getTodos 的选择器函数作为输入，并返回完成的任务数量。我们使用 filter 函数过滤 todos 数组中的已完成任务，并使用 length 属性获取任务数量。
在组件中使用选择器函数。
一旦我们创建了选择器函数，我们可以在组件中使用它来获取派生的值。例如，假设我们有一个名为 TodoList 的组件，用于显示所有的任务。我们可以将选择器函数传递给 connect 函数，以便在组件中访问它的返回值。例如：
import { connect } from 'react-redux'; import { getCompletedTodosCount } from '../selectors'; const mapStateToProps = state => ({ completedCount: getCompletedTodosCount(state) }); export default connect(mapStateToProps)(TodoList);在这个例子中，我们将 getCompletedTodosCount 函数传递给 mapStateToProps 函数，以便在组件中访问它的返回值。我们将返回值存储在 completedCount 属性中，并将其作为组件的 props 传递。
示例代码
下面是一个完整的示例代码，演示如何使用 Reselect 来处理冗余计算。这个示例代码创建了一个简单的 Redux 应用程序，用于管理任务列表。它包含一个名为 todos 的数组，其中存储了所有的任务，以及一个名为 filter 的字符串，用于过滤任务列表。我们使用 Reselect 来创建选择器函数，用于计算已完成任务的数量，并根据过滤器筛选任务列表。
// www.javascriptcn.com code example
import { createStore } from 'redux';
import { createSelector } from 'reselect';
// 初始化状态
const initialState = {
todos: [
{ id: 1, text: '学习 Redux', completed: false },
{ id: 2, text: '学习 React', completed: true },
{ id: 3, text: '学习 JavaScript', completed: false }
],
filter: ''
};
// reducer 函数
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'SET_FILTER':
return { ...state, filter: action.filter };
case 'TOGGLE_TODO':
return {
...state,
todos: state.todos.map(todo =>
todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
)
};
default:
return state;
}
};
// 选择器函数
const getTodos = state => state.todos;
const getFilter = state => state.filter;
const getVisibleTodos = createSelector(
[getTodos, getFilter],
(todos, filter) =>
todos.filter(todo => todo.text.includes(filter)).map(todo => ({
...todo,
text: todo.text.replace(filter, `<span style="background-color: yellow;">${filter}</span>`)
}))
);
const getCompletedTodosCount = createSelector(
[getTodos],
todos => todos.filter(todo => todo.completed).length
);
// 创建 store
const store = createStore(reducer);
// 订阅 store 的变化
store.subscribe(() => {
console.log(store.getState());
});
// 分发 action
store.dispatch({ type: 'SET_FILTER', filter: 'Redux' });
store.dispatch({ type: 'TOGGLE_TODO', id: 1 });
store.dispatch({ type: 'TOGGLE_TODO', id: 2 });
store.dispatch({ type: 'TOGGLE_TODO', id: 3 });
// 获取派生的值
const visibleTodos = getVisibleTodos(store.getState());
const completedTodosCount = getCompletedTodosCount(store.getState());在这个示例代码中，我们首先定义了一个名为 initialState 的对象，它包含了应用程序的初始状态。然后，我们定义了一个 reducer 函数，用于处理 store 中的状态变化。在 reducer 函数中，我们使用 switch 语句处理两种类型的 action：SET_FILTER 和 TOGGLE_TODO。
接下来，我们定义了三个选择器函数：getTodos、getFilter 和 getVisibleTodos。getTodos 函数用于获取 todos 数组，getFilter 函数用于获取 filter 字符串。getVisibleTodos 函数是一个组合函数，它使用 getTodos 和 getFilter 函数计算可见的任务列表。它首先使用 filter 函数过滤 todos 数组，然后使用 map 函数将匹配的文本替换为带有黄色背景的字符串。
最后，我们定义了一个名为 getCompletedTodosCount 的选择器函数，用于计算已完成任务的数量。它使用 filter 函数过滤 todos 数组，并使用 length 属性获取任务数量。我们使用 createStore 函数创建了一个 Redux store，并使用 subscribe 函数订阅了 store 的变化。最后，我们使用 dispatch 函数分发了三个 action，并使用 getVisibleTodos 和 getCompletedTodosCount 函数获取派生的值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d954cea941bf71340ea9a8