消除 Redux 中重复代码的技巧
Redux 是一种流行的 JavaScript 应用程序状态管理工具，它提供了一种有效的方法来管理应用程序中的状态。然而，Redux 并不是完美的，其中一个主要问题是重复代码。在大型 Redux 应用程序中，开发者通常需要编写大量的模板代码来完成通用的状态管理，这使得代码显得冗长难懂。本文将介绍如何消除 Redux 中的重复代码。
- actionCreators
在 Redux 中，一个 reducer 可能会处理多个 action。通常，每个 action 都需要定义一个 action creator 函数用于创建 action。这使得我们需要编写大量的 action creator 函数，这些函数通常具有相似的结构和语法。我们可以通过一个工具函数来简化这个过程。
// www.javascriptcn.com code example
function createActionCreators(actions) {
const actionCreators = {};
Object.entries(actions).forEach(([key, value]) => {
actionCreators[key] = () => ({ type: value });
});
return actionCreators;
}
const actions = {
ADD_TODO: 'ADD_TODO',
DELETE_TODO: 'DELETE_TODO',
};
const actionCreators = createActionCreators(actions);在上面的代码示例中，我们定义了一组 actions。然后，我们创建了一个 createActionCreators 函数，该函数接受 actions 对象作为参数，并迭代该对象来创建一个 actionCreators 对象。最后，我们使用 createActionCreators 函数来创建了一个 actionCreators 对象。
使用 actionCreators 对象的好处是，我们不再需要手动为每个 action 创建一个 action creator 函数。相反，我们只需要在需要一个 action 的地方使用 actionCreators 对象即可。
- reducers
在 Redux 世界中，reducer 是我们的单一 source of truth。尽管我们可能具有许多独立的 reducer 函数，但 reducer 经常共享相似的行为和逻辑。为此，我们可以创建一个高阶 reducer 增强器函数，该函数将纯函数转换为更具通用性和可重用性的 reducer 函数。
// www.javascriptcn.com code example
function withCommonReducer(reducer) {
return (state, action) => {
switch (action.type) {
case 'RESET': return reducer(undefined, action);
case 'SET_STATE': return reducer(action.state, action);
default: return reducer(state, action);
}
};
}
function todosReducer(state = [], action) {
switch (action.type) {
case 'ADD_TODO': return state.concat([action.payload]);
case 'DELETE_TODO': return state.filter(todo => todo.id !== action.payload.id);
default: return state;
}
}
const withCommonTodosReducer = withCommonReducer(todosReducer);
const rootReducer = combineReducers({
todos: withCommonTodosReducer,
});在上面的示例代码中，我们定义了一个 withCommonReducer 函数来增强 reducer。withCommonReducer 函数接受一个 reducer 函数作为参数，并将其包装成一个更具通用性和可重用性的 reducer 函数。
我们还定义了一个 todosReducer 函数，它是我们自己定义的 reducer。然而，我们使用 withCommonReducer 函数将其转换为一个更通用的 reducer。最后，我们使用 rootReducer 来引用 todosReducer。由于我们使用了 withCommonReducer 函数增强 reducer，我们可以确保我们的 todosReducer 具有和其他 reducer 相同的行为和逻辑。
结论
在 Redux 应用程序中，我们经常需要编写重复的代码来管理应用程序中的状态。在本文中，我们介绍了两种技巧来消除 Redux 中的重复代码。首先，我们使用了一个 createActionCreators 函数来简化 action creator 的创建。其次，我们定义了一个 withCommonReducer 函数来增强 reducer 函数的通用性和可重用性。这些技巧将使我们的代码更加简洁、高效和易于维护。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/676d550382fcee791c66eef6