Redux 中定义 Action

简介: 【8月更文挑战第30天】

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,
  },
});
AI 代码解读

在组件中使用 Action

在组件中,可以使用 useDispatch hook 来分发 action:

import { useDispatch } from 'react-redux';

const MyComponent = () => {
  const dispatch = useDispatch();

  const handleIncrement = () => {
    dispatch(incrementCounter());
  };

  return (
    <button onClick={handleIncrement}>+</button>
  );
};
AI 代码解读

结论

通过遵循最佳实践并使用 Redux 提供的实用程序函数,你可以定义清晰、一致且可维护的 Redux action。这些 action 是单向数据流的核心,使你可以通过可预测且可调试的方式更新应用程序状态。

目录
打赏
0
0
0
0
2683
分享
相关文章
Vuex 的Mutation 和 Action 有什么区别?
【10月更文挑战第15天】Mutation 和 Action 在 Vuex 中都有着重要的作用,它们相互协作,共同实现了 Vuex 状态管理的功能。理解它们的区别与联系,并在实际应用中正确使用,对于构建高效、可靠的 Vue 应用具有重要意义。
Redux 中的 Reducer 和 Action
【8月更文挑战第31天】
95 0
|
7月前
|
VUEX 使用学习四 : action
VUEX 使用学习四 : action
61 0
Vue-Cli的生命周期写法,methods要与data()平级,生命周期函数要与methods平级
Vue-Cli的生命周期写法,methods要与data()平级,生命周期函数要与methods平级
如何在Vuex中定义和使用getters和actions
在Vuex中,`getters`用于派生状态值,类似Vue的计算属性,例如从`todos`状态中过滤已完成/未完成任务。`actions`则处理异步操作,如模拟加载数据,通过`commit`改变状态。
Vue子组件调用父组件方法并传参的5种方式:emitfunction访parent.function、用inject关联父组件provide的方法、用window.fun
Vue子组件调用父组件方法并传参的5种方式:emitfunction访parent.function、用inject关联父组件provide的方法、用window.fun
Vue状态管理:请解释Vuex中的action是什么?它们有什么用途?
Vue状态管理:请解释Vuex中的action是什么?它们有什么用途?
457 2
基于MobX 封装 Action 接口 Loading #85
基于MobX 封装 Action 接口 Loading #85
95 0
Vuex学习12-触发action的第二种方式
Vuex学习12-触发action的第二种方式
160 0
Vuex学习12-触发action的第二种方式
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等