在前端开发中，Redux 是管理应用状态的重要工具。在 Redux 中，reducer 负责更新应用状态，因此正确地组织 reducer 对于应用的正确运行至关重要。本文将介绍如何正确地组织 Redux 的 reducer，并提供实用的示例代码。
什么是 reducer
在 Redux 中，reducer 是唯一的状态管理器。它是一个纯函数，接受旧的状态和一个 action，返回新的状态。reducer 的返回值决定了应用的下一个状态。因此，正确的 reducer 可以保证应用状态的正确更新。
以下是 reducer 的基本结构：
// javascriptcn.com 代码示例
function reducer(state, action) {
switch (action.type) {
case 'ACTION_TYPE':
// 处理 action
return newState; // 返回新的状态
default:
return state; // 返回旧的状态
}
}如何组织 reducer
正确地组织 reducer 是复杂的任务，需要考虑应用的规模和业务逻辑。但是，正确的 reducer 应该遵循以下准则：
- 保持 reducer 简洁
reducer 应该只关注它负责的部分的状态更新。如果一个 reducer 处理太多的不同的 action，它很快就会变得臃肿和难以维护。因此，每个 reducer 应该只关注一个 action。
- 按模块组织 reducer
当应用增长到一定程度时，所有的 reducer 都放在一个文件中将变得难以维护。因此，我们应该按模块组织 reducer。一个模块可以由多个 reducer 组成，每个 reducer 处理该模块的一部分状态更新。
- 避免重复代码
reducer 应该避免重复代码。如果多个 reducer 处理相同的状态更新，应该将它们合并为一个 reducer。
- 使用 immutable 数据结构
Redux 支持使用 immutable 数据结构来管理状态，这可以避免直接修改状态对象，并使得状态更容易追踪。因此，我们应该尽可能使用 immutable 数据结构来管理状态。
示例代码
以下是一个使用以上准则组织 reducer 的示例代码：
// javascriptcn.com 代码示例
import { combineReducers } from 'redux';
import { Map, List } from 'immutable';
// 用户 reducer
function user(state = Map(), action) {
switch (action.type) {
case 'LOGIN':
return state.merge(Map({ loggedIn: true, userInfo: action.payload }));
case 'LOGOUT':
return state.set('loggedIn', false);
default:
return state;
}
}
// 任务 reducer
function tasks(state = List(), action) {
switch (action.type) {
case 'ADD_TASK':
return state.push(Map(action.payload));
case 'DELETE_TASK':
return state.filter(task => task.get('id') !== action.payload);
default:
return state;
}
}
// 按模块组织 reducer
const reducer = combineReducers({
user,
tasks,
});
export default reducer;在此示例中，我们将用户和任务状态分别放入不同的 reducer 中。用户 reducer 处理登录和注销操作，并使用 immutable 数据结构来管理状态。任务 reducer 处理添加和删除任务操作，并返回新的状态对象。最后，我们使用 combineReducers 函数将多个 reducer 合并为一个 root reducer。
总结
正确地组织 Redux 的 reducer 对于应用的正确运行非常重要。在组织 reducer 时，我们应该保持 reducer 简洁、按模块组织 reducer、避免重复代码、使用 immutable 数据结构等准则。在实际应用中，我们应该为应用的规模和业务逻辑选择合适的组织方式，并遵循以上准则以实现更好的应用体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654ca32d7d4982a6eb61439d