引入redux之后,代码中对组件state的更新变得规范而可控,不再是分散的一句句setState,而是将组件的state集合在一个单例store中,并以引用的方式获取各自的state。
对于state的更新操作,也依赖一个名为action的js对象,该对象包含了该次更新的相关信息。对于store而言,action是外部信息注入的唯一途径,store调用api:store.dispatch()
type属性:
每个action必须有一个type属性,表示该次state更新属于哪种类型,值为字符量。除了type属性之外,action没有其他默认或强制的属性,完全由我们按需创建。文档只是建议我们给action携带尽量少的信息。
Action Creators:
redux中把构造action的函数称为action creator。其实就是个普通函数:
1 function addTodo(text) { 2 return { 3 type: ADD_TODO, 4 text 5 } 6 }
在Flux中,有的构造函数在创建完action对象后,直接调用dispatch方法触发更新,redux中也有相同的实现:
1 dispatch(addTodo(text)) 2 dispatch(completeTodo(index))
上面两行代码可以再包装、完善一下:
1 const boundAddTodo = text => dispatch(addTodo(text)) 2 const boundCompleteTodo = index => dispatch(completeTodo(index))
以后直接调用上面代码,就能创建并执行某类型的state更新了。
另,dispatch方法除了store.disptach(),还能通过
react-redux's connect()
以及
bindActionCreators()方法将action creators 绑定到dispatch()的方式使用。这个以后再讨论。
在进阶教程中会提到异步action async actions :如何处理ajax的响应以及在ajax控制流中构成建action creators。
当我们的项目比较复杂时,可以把actions 和action creators放在另一个文件中:
1 actions.js 2 3 /* 4 * action types 5 */ 6 7 export const ADD_TODO = 'ADD_TODO' 8 export const TOGGLE_TODO = 'TOGGLE_TODO' 9 export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER' 10 11 /* 12 * other constants 13 */ 14 15 export const VisibilityFilters = { 16 SHOW_ALL: 'SHOW_ALL', 17 SHOW_COMPLETED: 'SHOW_COMPLETED', 18 SHOW_ACTIVE: 'SHOW_ACTIVE' 19 } 20 21 /* 22 * action creators 23 */ 24 25 export function addTodo(text) { 26 return { type: ADD_TODO, text } 27 } 28 29 export function toggleTodo(index) { 30 return { type: TOGGLE_TODO, index } 31 } 32 33 export function setVisibilityFilter(filter) { 34 return { type: SET_VISIBILITY_FILTER, filter }