Redux 中的 action 是描述状态更新意图的对象。它们是单向数据流的核心，因为它们是唯一可以更新 Redux store 中状态的方法。
Action 的结构
Redux action 必须遵循特定的结构：
- type： 一个字符串，标识 action 的类型。
- payload： 可选的附加数据，根据 action 类型而异。
创建 Action
Redux 提供了几个实用程序函数来帮助创建 action：
- createAction(type, payloadCreator)： 创建一个 action 创建函数，它生成具有指定类型和有效负载的 action。
- createAsyncThunk(type, payloadCreator)： 创建一个异步 action 创建函数，它返回一个 thunk 函数，该函数可以执行异步操作并分发 action。
- createSlice(options)： 创建一个 reducer 和 action 创建函数的集合，简化了创建相关 action 和 reducer 的过程。
最佳实践
定义 Redux action 时，请遵循以下最佳实践：
- 使用有意义的类型： 选择描述性且唯一的 action 类型。
- 保持有效负载简洁： 只有在绝对必要时才包含有效负载。
- 使用 action 创建函数： 使用 Redux 提供的实用程序函数来创建 action，以确保一致性和可读性。
- 遵循命名约定： 考虑为 action 类型和有效负载属性遵循命名约定，例如使用大写字母或前缀。
示例
以下是一些定义 Redux action 的示例：
// 使用 createAction
const incrementCounter = createAction('INCREMENT_COUNTER');
// 使用 createAsyncThunk
const fetchUserData = createAsyncThunk('FETCH_USER_DATA', async (userId) => {
const response = await fetch(`/users/${userId}`);
return response.json();
});
// 使用 createSlice
const counterSlice = createSlice({
name: 'counter',
initialState: 0,
reducers: {
increment: (state) => state + 1,
decrement: (state) => state - 1,
},
});
在组件中使用 Action
在组件中，可以使用 useDispatch hook 来分发 action：
import { useDispatch } from 'react-redux';
const MyComponent = () => {
const dispatch = useDispatch();
const handleIncrement = () => {
dispatch(incrementCounter());
};
return (
<button onClick={handleIncrement}>+</button>
);
};
结论
通过遵循最佳实践并使用 Redux 提供的实用程序函数，你可以定义清晰、一致且可维护的 Redux action。这些 action 是单向数据流的核心，使你可以通过可预测且可调试的方式更新应用程序状态。
