redux action

Action

Action 是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。
添加新 todo 任务的 action 是这样的:

const ADD_TODO = 'ADD_TODO'
{
    
    
  type: ADD_TODO,
  text: 'Build my first Redux app'
}

Action 本质上是 JavaScript 普通对象。我们约定,action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。

多数情况下,type 会被定义成字符串常量。当应用规模越来越大时,建议使用单独的模块或文件来存放 action。

import {
    
     ADD_TODO, REMOVE_TODO } from '../actionTypes'

Action 创建函数

Action 创建函数 就是生成 action 的方法。
在 Redux 中的 action 创建函数只是简单的返回一个 action:

function addTodo(text) {
    
    
  return {
    
    
    type: ADD_TODO,
    text
  }
}

Redux 中只需把 action 创建函数的结果传给 dispatch() 方法即可发起一次 dispatch 过程。

dispatch(addTodo(text))
dispatch(completeTodo(index))

或者创建一个 被绑定的 action 创建函数 来自动 dispatch:

const boundAddTodo = text => dispatch(addTodo(text))
const boundCompleteTodo = index => dispatch(completeTodo(index))

然后直接调用它们:

boundAddTodo(text);
boundCompleteTodo(index);

源码

/*
 * action 类型
 */

export const ADD_TODO = 'ADD_TODO'
export const TOGGLE_TODO = 'TOGGLE_TODO'
export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER'

/*
 * 其它的常量
 */

export const VisibilityFilters = {
    
    
  SHOW_ALL: 'SHOW_ALL',
  SHOW_COMPLETED: 'SHOW_COMPLETED',
  SHOW_ACTIVE: 'SHOW_ACTIVE'
}

/*
 * 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 }
}

现在让我们 开发一些 reducers 来说明在发起 action 后 state 应该如何更新。

猜你喜欢

转载自blog.csdn.net/qq_45429539/article/details/114300295