当前位置：首页 > news >正文

React15 - 在ruducer中以对象映射替代switch语句

news 2026/3/26 23:52:48

完全可以使用对象映射来代替 Redux reducer 中的 switch case 语句, 这种写法更加简洁、易维护，也符合函数式编程的思想。以下是几种实现方式：

1. 基础对象映射方式

// 定义 action 类型常量
const TYPES = {ADD_TODO: 'ADD_TODO',UPDATE_TODO: 'UPDATE_TODO',DELETE_TODO: 'DELETE_TODO',TOGGLE_TODO: 'TOGGLE_TODO'
};// 创建 action 处理函数的映射对象
const handlers = {[TYPES.ADD_TODO]: (state, action) => ({...state,todos: [...state.todos, action.payload]}),[TYPES.UPDATE_TODO]: (state, action) => ({...state,todos: state.todos.map(todo =>todo.id === action.payload.id ? action.payload : todo)}),[TYPES.DELETE_TODO]: (state, action) => ({...state,todos: state.todos.filter(todo => todo.id !== action.payload)}),[TYPES.TOGGLE_TODO]: (state, action) => ({...state,todos: state.todos.map(todo =>todo.id === action.payload? { ...todo, completed: !todo.completed }: todo)})
};// reducer 使用映射对象
const todoReducer = (state = initialState, action) => {const handler = handlers[action.type];return handler ? handler(state, action) : state;
};

2. 封装成通用函数

// 创建一个通用的 createReducer 函数
const createReducer = (initialState, handlers) => {return (state = initialState, action) => {const handler = handlers[action.type];return handler ? handler(state, action) : state;};
};// 使用示例
const todoReducer = createReducer(initialState, {[TYPES.ADD_TODO]: (state, action) => ({...state,todos: [...state.todos, action.payload]}),[TYPES.UPDATE_TODO]: (state, action) => ({...state,todos: state.todos.map(todo =>todo.id === action.payload.id ? action.payload : todo)})
});

3. 使用 Redux Toolkit（推荐）

Redux Toolkit 内部已经使用了这种模式：

import { createSlice } from '@reduxjs/toolkit';const todosSlice = createSlice({name: 'todos',initialState: {todos: []},reducers: {addTodo: (state, action) => {state.todos.push(action.payload);},updateTodo: (state, action) => {const index = state.todos.findIndex(todo => todo.id === action.payload.id);if (index !== -1) {state.todos[index] = action.payload;}},deleteTodo: (state, action) => {state.todos = state.todos.filter(todo => todo.id !== action.payload);},toggleTodo: (state, action) => {const todo = state.todos.find(todo => todo.id === action.payload);if (todo) {todo.completed = !todo.completed;}}}
});// 自动生成的 action creators
export const { addTodo, updateTodo, deleteTodo, toggleTodo } = todosSlice.actions;
export default todosSlice.reducer;

4. 高级封装 - 支持异步和嵌套

const createReducer = (initialState, handlers) => {// 支持嵌套的 action 类型const flattenHandlers = (obj, prefix = '') => {return Object.keys(obj).reduce((acc, key) => {const fullKey = prefix ? `${prefix}/${key}` : key;if (typeof obj[key] === 'function') {acc[fullKey] = obj[key];} else if (typeof obj[key] === 'object') {Object.assign(acc, flattenHandlers(obj[key], fullKey));}return acc;}, {});};const flatHandlers = flattenHandlers(handlers);return (state = initialState, action) => {// 处理普通 actionif (flatHandlers[action.type]) {return flatHandlers[action.type](state, action);}// 处理异步 action 的三个状态const [baseType, status] = action.type.split('/');if (status && flatHandlers[`${baseType}/${status}`]) {return flatHandlers[`${baseType}/${status}`](state, action);}return state;};
};// 使用示例
const userReducer = createReducer({ data: null, loading: false, error: null },{FETCH_USER: {PENDING: (state) => ({ ...state, loading: true, error: null }),FULFILLED: (state, action) => ({...state,loading: false,data: action.payload}),REJECTED: (state, action) => ({...state,loading: false,error: action.payload})},UPDATE_USER: (state, action) => ({...state,data: { ...state.data, ...action.payload }})}
);

5. TypeScript 版本

type ReducerHandlers<S, A extends Action = AnyAction> = {[key: string]: (state: S, action: A) => S;
};function createReducer<S>(initialState: S,handlers: ReducerHandlers<S>
): (state: S | undefined, action: AnyAction) => S {return (state: S = initialState, action: AnyAction): S => {const handler = handlers[action.type];return handler ? handler(state, action) : state;};
}// 使用示例
interface Todo {id: string;text: string;completed: boolean;
}interface TodoState {todos: Todo[];
}const todoReducer = createReducer<TodoState>({ todos: [] },{[TYPES.ADD_TODO]: (state, action: PayloadAction<Todo>) => ({...state,todos: [...state.todos, action.payload]}),[TYPES.TOGGLE_TODO]: (state, action: PayloadAction<string>) => ({...state,todos: state.todos.map(todo =>todo.id === action.payload? { ...todo, completed: !todo.completed }: todo)})}
);