Redux 中如何封装 Action、Reducer 和 Selector
在前端开发中，Redux 是一个非常流行的状态管理库。Redux 的核心概念是 Store、Action 和 Reducer，其中 Action 是用来描述一个事件的对象，Reducer 是用来根据 Action 更新 Store 中的状态的函数。在实际开发中，为了提高代码的可维护性和复用性，我们需要封装 Action、Reducer 和 Selector。本文将详细介绍如何封装这些内容，并提供示例代码。
一、封装 Action
Action 是一个描述事件的对象，它包含一个 type 属性和一些 payload 属性。在实际开发中，我们需要封装 Action 以便于复用和统一管理。
- 封装 Action Creator
Action Creator 是一个用来创建 Action 的函数，它接收一些参数并返回一个 Action。在封装 Action Creator 时，我们需要考虑以下几点：
- 统一的 Action type 前缀
- Action type 的字符串常量
- Action Creator 的参数和返回值类型
下面是一个封装了 Action Creator 的示例代码：
// javascriptcn.com 代码示例
const PREFIX = 'MY_APP/';
export const ActionTypes = {
FETCH_USER: `${PREFIX}FETCH_USER`,
UPDATE_USER: `${PREFIX}UPDATE_USER`,
};
export interface FetchUserAction {
type: typeof ActionTypes.FETCH_USER;
payload: {
userId: string;
};
}
export interface UpdateUserAction {
type: typeof ActionTypes.UPDATE_USER;
payload: {
userId: string;
name: string;
};
}
export type UserAction = FetchUserAction | UpdateUserAction;
export function fetchUserAction(userId: string): FetchUserAction {
return {
type: ActionTypes.FETCH_USER,
payload: { userId },
};
}
export function updateUserAction(userId: string, name: string): UpdateUserAction {
return {
type: ActionTypes.UPDATE_USER,
payload: { userId, name },
};
}- 封装 Action Type
Action Type 是一个字符串常量，用来描述一个事件的类型。在实际开发中，我们需要封装 Action Type 以便于复用和统一管理。
下面是一个封装了 Action Type 的示例代码：
const PREFIX = 'MY_APP/';
export const ActionTypes = {
FETCH_USER: `${PREFIX}FETCH_USER`,
UPDATE_USER: `${PREFIX}UPDATE_USER`,
};二、封装 Reducer
Reducer 是一个用来根据 Action 更新 Store 中的状态的函数，它接收两个参数：当前的状态和一个 Action，然后返回一个新的状态。在实际开发中，我们需要封装 Reducer 以便于复用和统一管理。
- 封装 Reducer
在封装 Reducer 时，我们需要考虑以下几点：
- Reducer 的初始状态
- Reducer 的返回值类型
- Reducer 的处理逻辑
下面是一个封装了 Reducer 的示例代码：
// javascriptcn.com 代码示例
import { UserAction, ActionTypes } from './actions';
export interface UserState {
isLoading: boolean;
data?: {
id: string;
name: string;
};
}
const initialState: UserState = {
isLoading: false,
};
export function userReducer(state = initialState, action: UserAction): UserState {
switch (action.type) {
case ActionTypes.FETCH_USER:
return {
...state,
isLoading: true,
};
case ActionTypes.UPDATE_USER:
return {
...state,
isLoading: false,
data: {
id: action.payload.userId,
name: action.payload.name,
},
};
default:
return state;
}
}- 封装 Reducer Selector
Reducer Selector 是一个用来从 Store 中获取状态的函数，它接收一个 Store 对象并返回一个状态对象。在实际开发中，我们需要封装 Reducer Selector 以便于复用和统一管理。
下面是一个封装了 Reducer Selector 的示例代码：
// javascriptcn.com 代码示例
import { RootState } from '../store';
import { UserState } from './reducer';
export function selectUserState(state: RootState): UserState {
return state.user;
}
export function selectUserName(state: RootState): string | undefined {
return state.user.data?.name;
}三、总结
本文详细介绍了如何封装 Action、Reducer 和 Selector，希望对大家有所帮助。在实际开发中，封装这些内容可以提高代码的可维护性和复用性，同时也可以统一管理和规范开发流程。如果您对 Redux 的使用还有疑问，可以继续学习 Redux 相关的内容。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65669456d2f5e1655df92545