[Redux] Extracting Action Creators
We will create an anction creator to manage the dispatch actions, to keep code maintainable and self-documenting by extracting action creators from the components.
let nextTodoId = 0;
const ACTION_CREATOR = {
addTodo: (text) => {
return {
type: 'ADD_TODO',
id: nextTodoId++,
text
}
},
setVisibilityFilter: (filter) => {
return {
type: 'SET_VISIBILITY_FILTER',
filter
}
},
toggleTodo: (id) => {
return {
type: 'TOGGLE_TODO',
id
}
}
}
Then update the dispatch function:
... let AddTodo = ({ dispatch }) => {
let input; return (
<div>
<input ref={node => {
input = node;
}} />
<button onClick={() => {
dispatch(ACTION_CREATOR.addTodo(input.value))
input.value = '';
}}>
Add Todo
</button>
</div>
);
};
AddTodo = connect()(AddTodo); ...
const mapDispatchToTodoListProps = (dispatch) => {
return {
onTodoClick: (id) => {
dispatch(ACTION_CREATOR.toggleTodo(id));
}
};
}; ....
const mapDispatchToLinkProps = (
dispatch,
ownProps
) => {
return {
onClick: () => {
dispatch(ACTION_CREATOR.setVisibilityFilter(ownProps.filter))
}
}
}
[Redux] Extracting Action Creators的更多相关文章
- [Redux] Avoid action type naming conflicts
In redux, the action type is just a normal string type, it is easy to get naming conflicts in large ...
- [Redux] Extracting Container Components -- Complete
Clean TodoApp Component, it doesn't need to receive any props from the top level component: const To ...
- [Redux] Redux: Extracting Container Components -- AddTodo
Code to be refactored: const AddTodo = ({ onAddClick }) => { let input; return ( <div> < ...
- [Redux] Extracting Container Components -- VisibleTodoList
Code to be refacted: const TodoList = ({ todos, onTodoClick }) => ( <ul> {todos.map(todo =& ...
- [Redux] Extracting Container Components (FilterLink)
Learn how to avoid the boilerplate of passing the props down the intermediate components by introduc ...
- [Redux] Extracting Presentational Components -- TodoApp
Finally, I just noticed that the to-do app component doesn't actually have to be a class. I can turn ...
- [Redux] Extracting Presentational Components -- Footer, FilterLink
Code to be refactored: let nextTodoId = 0; class TodoApp extends Component { render() { const { todo ...
- [Redux] Extracting Presentational Components -- AddTodo
The code to be refactored: let nextTodoId = 0; class TodoApp extends Component { render() { const { ...
- [Redux] Extracting Presentational Components -- Todo, TodoList
Code to be refactored: let nextTodoId = 0; class TodoApp extends Component { render() { const { todo ...
随机推荐
- HDU 1027 Ignatius and the Princess II 选择序列题解
直接选择序列的方法解本题,可是最坏时间效率是O(n*n),故此不能达到0MS. 使用删除优化,那么就能够达到0MS了. 删除优化就是当须要删除数组中的元素为第一个元素的时候,那么就直接移动数组的头指针 ...
- android 中文件加密 解密 算法实战
现在项目里面有一个需求,本项目里面下载的视频和文档都不允许通过其他的播放器播放,在培训机构里面这样的需求很多.防止有人交一份钱,把所有的课件就拷给了别人.这样的事情培训机构肯定是不愿意的.现在我项目里 ...
- Node.js 之 express 入门 ejs include公共部分
1. 直接进入express安装 因为之前有一篇文章我已经讲过怎么安装node了 而网上的教程也是非常多.所有直接进入到express.教程简陋 由于我比较笨 所有只要写到我自己明白就行. 这里有个教 ...
- docke 网络配置2
一,docker 的bridge模式是和vmware中的nat模式类似的,但是如果想要弄成和vmwae中的bridge怎么办呢? 说明,bridge模式获取的Ip是与宿主机的ip是出于同一个网段的. ...
- CPU使用率和Load Average的关系
看了几篇博客总结的区别,自己终于明白了含义,在这里将理解总结一下: 对于定义和解释,感觉淘测试上的更容易理解: 引用如下: CPU使用率: 一段时间内CPU的使用状况,从这个指标可以看出某一段时间内 ...
- Objective-C 协议(接口)
Objective-C 协议类似于java语言中的接口 新建文件步骤:Objective-C File ---> File Type = "Protocol" @protoc ...
- Installation error: INSTALL_CANCELED_BY_USER
这个错误,从字面上理解,就是已经安装的时候被用户取消了. 我出现这个错误的时候,是手机连接在电脑上的. 经过网上搜索,确认这是安装apk到手机时,被手机取消了安装操作. 1. 确保手机处于开发者模式. ...
- canvas元素大小与绘图表面大小
原文链接:canvas总结:元素大小与绘图表面大小 前言 我们使用canvas的时候一般在canvas元素中直接设置它的width和height: 1 <canvas id="myCa ...
- 学习hadoop
一.笔记本触摸板关闭方法 1.在windows下有官方驱动. 2.ubuntu下没有 操作方法如下: 1,终端操作 临时禁止触摸板:sudo modprobe -r psmouse 开启触摸板:sud ...
- Java学习笔记--Swing
1.创建框架 AWT中Frame类用来描述顶层窗口,在Swing中,这个类的名为JFrame,它从Frame类扩展. JFrame是少数几个在Swing不用绘制在画布上的组件之一,因此,它的修饰部件( ...