Redux之react结合redux实战篇(十)
以
TODO为例分析,实际开发中并不是那么简单,下面的原型只是开发中的一个原型,这个简单的例子,有助于掌握数据处理传递的原则。
# 一、定义constants
这一步不是必须的
/**
* 常量统一保存,便于管理
*/
export const ADD_TODO = 'ADD_TODO';
export const TOGGLE_TODO = 'TOGGLE_TODO';
export const SET_VISIBILITY = 'SET_VISIBILITY';
//controll todo wheher show or hide
export const SHOW_ALL = 'SHOW_ALL';
export const SHOW_ACTIVE = 'SHOW_ACTIVE';
export const SHOW_COMPLETED = 'SHOW_COMPLETED';
@前端进阶之旅: 代码已经复制到剪贴板
# 二、定义actionCreator
/**
* 定义action creator
*/
import * as actionType from '../constant/index';
let nextTodo = 0;
export const addTodo = (text)=>({
type:actionType.ADD_TODO,
id:nextTodo++,
text
})
export const toggleTodo = (id)=>({
type:actionType.TOGGLE_TODO,
id
})
export const setVisibilityFilter = (filter)=>{
return {
type:actionType.SET_VISIBILITY,
filter
}
}
@前端进阶之旅: 代码已经复制到剪贴板
# 三、定义reducer
拆分reducer
SetVisibility.js
/**
* 处理TODO可见与不可见的reducer
*/
import * as actionType from '../constant/index';
// 初始状态是自己设置的 后面的状态会转化
// 接收当前状态(设置默认的过滤SHOW_ALL,如设置某些选项卡的active一样),和action返回新的state
export