Acción
La acción es la carga útil que transfiere datos de la aplicación a la tienda. Es la única fuente de datos de la tienda. Generalmente, pasará la acción a la tienda a través de store.dispatch ().
La acción para agregar una nueva tarea pendiente es así:
const ADD_TODO = 'ADD_TODO'
{
type: ADD_TODO,
text: 'Build my first Redux app'
}
La acción es esencialmente un objeto JavaScript normal. Estamos de acuerdo en que se debe utilizar un campo de tipo de cadena en acción para indicar la acción a realizar.
En la mayoría de los casos, el tipo se definirá como una constante de cadena. Cuando la escala de la aplicación aumenta cada vez más, se recomienda utilizar un módulo o archivo separado para almacenar la acción.
import {
ADD_TODO, REMOVE_TODO } from '../actionTypes'
Función de creación de acciones
La función de creación de acción es la forma de generar acción.
La función de creación de acciones en Redux simplemente devuelve una acción:
function addTodo(text) {
return {
type: ADD_TODO,
text
}
}
En Redux, solo necesita pasar el resultado de la función de creación de la acción al método dispatch () para iniciar un proceso de envío.
dispatch(addTodo(text))
dispatch(completeTodo(index))
O cree una función de creación de acción vinculada para enviar automáticamente:
const boundAddTodo = text => dispatch(addTodo(text))
const boundCompleteTodo = index => dispatch(completeTodo(index))
Luego llámalos directamente:
boundAddTodo(text);
boundCompleteTodo(index);
Código fuente
/*
* 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 }
}