2 redux Action

青旅半醒 2023-02-27 15:56 10阅读 0赞

### **Action** ###

action是一个对象（object），表示一个任务的描述

如下：添加新 todo 任务的 action 是这样的：

const ADD\_TODO = 'ADD\_TODO'

// 如下对象表示一个 action

var add = \{

type: ADD\_TODO,

text: 'Build my first Redux app'

\}

我们约定，action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作类型，除了 type 字段外，action 对象的其他字段完全由你自己决定。

建议使用单独的模块或文件来存放 action。

import \{  ADD\_TODO, REMOVE\_TODO \} from '../actionTypes'

# #

# #

### **Action 创建函数** ###

Action 创建函数用于创建action

action 创建函数只是简单的返回一个 action，如下示例：

function addTodo(text)

\{

return \{

type: ADD\_TODO,

text

\}

\}

### **将action传给Reducer** ###

通过store的 dispatch() 方法可将action传给reducer。

store.dispatch(addTodo(text))

store.dispatch(completeTodo(index))

### **action示例** ###

/\*

\* action 类型

\*/

export const ADD\_TODO = 'ADD\_TODO';

export const TOGGLE\_TODO = 'TOGGLE\_TODO'

export const SET\_VISIBILITY\_FILTER = 'SET\_VISIBILITY\_FILTER'

/\*

\* action 创建函数

\*/

export function addTodo(text) \{

return \{  type: ADD\_TODO, text \}

\}

export function toggleTodo(index) \{

return \{  type: TOGGLE\_TODO, index \}

\}

export function setVisibilityFilter(filter) \{

return \{  type: SET\_VISIBILITY\_FILTER, filter \}

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，10人围观）

还没有评论，来说两句吧...

相关阅读

相关 redux 详解（带你学习store、action、redux）

前言 react 用了一年多，但一直对 redux 了解不多，一直想找个机会彻底掌握它，所以有了今天这篇文章，如果你也对 redux 不够了解，那么可以仔细阅读下，相信会

女爷i/ 2024年03月26日 13:10/ 0 赞/ 61 阅读

相关 React【Redux简介、什么时候使用Redux、Redux 库和工具、单向数据流、Redux Action、Redux Reducer、Redux Store】(十)

![5cf10194cb164aeb849319fb6864f88b.gif][] 文章目录 Redux简介什么时候使用Redux Redux 库和工具单向

太过爱你忘了你带给我的痛/ 2024年02月19日 10:40/ 0 赞/ 25 阅读

相关正确理解redux Toolkits中createSlice的action.payload

使用redux Toolkits中的createSlice编写extraReducers经常看到使用action.payload来更新state状态值： ![b16122d5

小咪咪/ 2023年10月16日 13:21/ 0 赞/ 37 阅读

相关 2 redux Action

Action action是一个对象（object），表示一个任务的描述如下：添加新 todo 任务的 action 是这样的： const ADD\_TODO =

青旅半醒/ 2023年02月27日 15:56/ 0 赞/ 11 阅读

相关 Redux—redux-thunk— action里处理异步，封装详细步骤，适合初学者。

初学redux确实觉得很绕，因为封装的文件夹多容易乱。下面时我整理的步骤。本文码云地址：https://gitee.com/guo–dong/redux.git

谁借莪１个温暖的怀抱￠/ 2022年12月19日 00:50/ 0 赞/ 249 阅读

相关 Redux框架中action控制用户管理

本人用Redux框架写的其中的一个action用户管理，实现添加，删除，修改，以及引入antd的包，欢迎相同技术的伙伴一起交流学习 / 人员 / impo

Dear 丶/ 2022年07月14日 15:48/ 0 赞/ 145 阅读

相关 Redux之redux-actions的使用

1：作用：当我们的在开发大型应用的时候，对于大量的action，我们的reducer需要些大量的swich来对action.type进行判断。 redux

快来打我*/ 2022年05月20日 09:04/ 0 赞/ 321 阅读

相关 React - 简单理解Redux的action reducer store

什么是store，如图 ![20181122133223158.png][] 这就是一个store,我们可以看到由dispatcher reducer state构成，不

不念不忘少年蓝@/ 2022年04月15日 05:59/ 0 赞/ 264 阅读

相关 redux精品先导课程—04action创建函数

可以将上一节的代码进行优化 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZ

Bertha 。/ 2022年03月10日 05:14/ 0 赞/ 172 阅读

相关 Fish Redux系列学习之认识view、action

继续上一篇文章： [Fish Redux系列学习之新建page以及认识state][Fish Redux_page_state] ![在这里插入图片描述][waterma

布满荆棘的人生/ 2021年08月24日 21:50/ 0 赞/ 297 阅读