Redux 是一种用于 JavaScript 应用程序的状态管理库，它提供了一个可预测的状态容器，使得应用程序的状态变化可被追踪和调试。在 React 中，Redux 通常与 React 结合使用，它可以帮助我们更好地管理组件之间的状态和通信。
Redux 架构设计
Redux 的核心是状态容器，它包含了整个应用程序的状态。Redux 状态容器的设计遵循了 Flux 架构的思想，其中包含了三个核心概念：Action、Reducer 和 Store。
Action
Action 是一个简单的对象，用于描述发生了什么事件。它必须包含一个 type 属性，用于描述事件的类型。例如，下面是一个 Action 对象的例子：
{ type: 'ADD_TODO', payload: { text: 'Learn Redux', completed: false } }
在这个例子中，Action 的类型是 ADD_TODO，它表示要添加一个新的待办事项，同时还包含了待办事项的内容。
Reducer
Reducer 是一个纯函数，用于根据 Action 对象来更新状态容器中的状态。它接收两个参数：当前状态和 Action 对象，然后根据 Action 的类型来返回一个新的状态。例如，下面是一个简单的 Reducer 的例子：
-- -------------------- ---- ------- -------- ------------------ - --- ------- - ------ ------------- - ---- ----------- ------ - --------- -------------- -- -------- ------ ------ - -展开代码
在这个例子中，Reducer 接收一个状态数组和一个 Action 对象，然后根据 Action 的类型来返回一个新的状态数组。如果 Action 的类型是 ADD_TODO，那么就会将待办事项添加到状态数组中。
Store
Store 是一个对象，用于管理整个应用程序的状态。它包含了当前状态、Reducer 和一些方法，用于更新状态和订阅状态的变化。例如，下面是一个简单的 Store 的例子：
import { createStore } from 'redux'; import todosReducer from './reducers/todos'; const store = createStore(todosReducer); export default store;
在这个例子中，我们使用 createStore 函数来创建一个 Store 对象，并将一个 Reducer 传递给它。然后我们将这个 Store 对象导出，以便其他模块可以使用它。
Redux 架构优化
虽然 Redux 的设计非常简单明了，但在实际应用中，我们还需要考虑一些优化策略，以提高应用程序的性能和可维护性。
使用 Redux Toolkit
Redux Toolkit 是一个官方推荐的工具集，它提供了一些简化 Redux 开发的工具和库。使用 Redux Toolkit 可以大大简化 Redux 应用程序的开发和维护，同时还可以提高应用程序的性能。
例如，Redux Toolkit 提供了一个 createSlice 函数，它可以自动生成 Reducer 和 Action Creator。使用 createSlice 函数可以大大简化 Reducer 和 Action Creator 的编写，同时还可以提高应用程序的性能。
-- -------------------- ---- ------- ------ - ----------- - ---- ------------------- ----- ---------- - ------------- ----- -------- ------------- --- --------- - -------- ------- ------- -- - --------------------------- - - --- ------ ----- - ------- - - ------------------- ------ ------- -------------------展开代码
在这个例子中，我们使用 createSlice 函数来创建一个 Slice 对象，它包含了一个自动生成的 Reducer 和 Action Creator。然后我们将这个 Slice 对象导出，以便其他模块可以使用它。
使用 Reselect
Reselect 是一个用于创建可记忆的选择器的库，它可以帮助我们优化 Redux 应用程序的性能。选择器是一个纯函数，它接收状态作为输入，然后根据状态计算出一个新的值。如果输入的状态没有发生变化，那么选择器就会返回上一次计算的结果，从而避免了重复计算。
例如，下面是一个使用 Reselect 的选择器的例子：
import { createSelector } from 'reselect'; const getTodos = state => state.todos; const getCompletedTodos = createSelector( getTodos, todos => todos.filter(todo => todo.completed) );
在这个例子中，我们使用 createSelector 函数来创建一个选择器，它接收一个状态选择器和一个计算函数作为输入，然后返回一个新的选择器。在计算函数中，我们使用状态选择器来获取状态，然后根据状态计算出一个新的值。
使用 Immutable.js
Immutable.js 是一个用于创建不可变数据结构的库，它可以帮助我们优化 Redux 应用程序的性能。不可变数据结构是指一旦创建就不能被修改的数据结构，每次修改都会返回一个新的数据结构。这样可以避免不必要的数据拷贝和比较，从而提高应用程序的性能。
例如，下面是一个使用 Immutable.js 的状态容器的例子：
-- -------------------- ---- ------- ------ - --- - ---- ------------ ----- ------------ - ----- ------ ----- --- -------- ------------------ - ------------- ------- - ------ ------------- - ---- ----------- ------ --------------------- ------------------- --------------------- -------- ------ ------ - -展开代码
在这个例子中，我们使用 Map 函数来创建一个不可变的状态容器，并将其作为初始状态。然后我们使用 setIn 函数来更新状态容器中的状态，它会返回一个新的状态容器，从而避免了不必要的数据拷贝和比较。
示例代码
下面是一个简单的使用 Redux 的待办事项应用程序的示例代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - --------- ------------ ----------- - ---- -------------- ------ - ------------ -------------- - ---- ------------------- ----- ---------- - ------------- ----- -------- ------------- --- --------- - -------- ------- ------- -- - --------------------------- -- ----------- ------- ------- -- - ----- ---- - --------------- -- ------- --- ---------------- -- ------ - -------------- - ---------------- - - - --- ----- ----- - ---------------- -------- ------------------ --- -------- ----- - ------ - --------- -------------- --------- -- ----------- -- - -------- ---------- - ----- -------- - -------------- ----- ----- - ----------------- -- ------- ----- ------------- - -- -- - ----- ---- - ------------- - --- -------- -- ------ - ------------------------------------- --- ----------- ----- ---------- ----- ---- - -- ----- ---------------- - -- -- - -------------------------------------------- -- ------ - ----- ------- --------------------------- ------------- ---- --------------- -- - --- ------------- ----------- -- --------------------------- --------------- - ------------------ - ---------- ----- --- ----- ------ -- - ------ ------- ----展开代码
在这个示例代码中，我们使用了 Redux Toolkit 来创建一个包含 Reducer 和 Action Creator 的 Slice 对象，并将它传递给 configureStore 函数来创建一个 Store 对象。然后我们使用 Provider 组件来将 Store 对象传递给应用程序，以便应用程序中的组件可以访问它。
在 TodoList 组件中，我们使用 useDispatch 和 useSelector 钩子来访问 Store 对象，并使用 addTodo 和 toggleTodo Action Creator 来更新状态。然后我们使用 map 函数来渲染待办事项列表，点击列表项可以切换待办事项的状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d5244aa941bf71349813be
