react-redux-action
Action 是把数据从应用(view等)传到 store 的有效载荷,store.dispatch()
将 action 传到 store。
//尽量减少在 action 中传递的数据
//action创建函数创建action const addTodo=(text)=>{
return {
type:"ADD_TODO",
id:todoId++,
text
}
}
单独的模块存放action
import { ADD_TODO, REMOVE_TODO } from '../actionTypes'
Redux 中只需把 action 创建函数的结果传给 dispatch()
方法即可发起一次 dispatch 过程。
dispatch(addTodo(text))
//或者创建一个 被绑定的 action 创建函数 来自动 dispatch: const boundAddTodo = text => dispatch(addTodo(text))
boundAddTodo(text);
//惟一使用 bindActionCreators(actionCreators, dispatch) 的场景是:
把 action creator 往下传到一个组件上,却不想让这个组件觉察到 Redux 的存在,而且不希望把 Redux store 或 dispatch 传给它。 //把 action creators 转成拥有同名 keys 的对象,再使用dispatch把每个 action creator 包起来可以直接调用。 //TodoActionCreators.js: export function addTodo(text) {
return {
type: 'ADD_TODO',
text
};
} export function removeTodo(id) {
return {
type: 'REMOVE_TODO',
id
};
}
//SomeComponent.js import { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'; import * as TodoActionCreators from './TodoActionCreators'; class TodoListContainer extends Component {
componentDidMount() {
// 由 react-redux 注入:
let { dispatch } = this.props;
let action = TodoActionCreators.addTodo('Use Redux');
dispatch(action);
} render() {
let { todos, dispatch } = this.props; // 这是应用 bindActionCreators 比较好的场景:
// 在子组件里,可以完全不知道 Redux 的存在。 let boundActionCreators = bindActionCreators(TodoActionCreators, dispatch); return (
<TodoList todos={todos} {...boundActionCreators} />
); // 或者
//return <TodoList todos={todos} dispatch={dispatch} />;
}
} export default connect(
state => ({ todos: state.todos })
)(TodoListContainer)
react-redux-action的更多相关文章
- React + Redux 入坑指南
Redux 原理 1. 单一数据源 all states ==>Store 随着组件的复杂度上升(包括交互逻辑和业务逻辑),数据来源逐渐混乱,导致组件内部数据调用十分复杂,会产生数据冗余或者混用 ...
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- react+redux教程(五)异步、单一state树结构、componentWillReceiveProps
今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...
- react+redux官方实例TODO从最简单的入门(6)-- 完结
通过实现了增-->删-->改-->查,对react结合redux的机制差不多已经了解,那么把剩下的功能一起完成吧 全选 1.声明状态,这个是全选状态 2.action约定 3.red ...
- react+redux官方实例TODO从最简单的入门(1)-- 前言
刚进公司的时候,一点react不会,有一个需求要改,重构页面!!!完全懵逼,一点不知道怎么办!然后就去官方文档,花了一周时间,就纯react实现了页面重构,总体来说,react还是比较简单的,由于当初 ...
- 重写官方TodoList,对于初学react+redux的人来说,很有好处
虽然官网的TodoList的例子写的很详细,但是都是一步到位,就是给你一个action,好家伙,全部都写好了,给你一个reducer,所有功能也是都写好了,但是我们这些小白怎么可能一下就消化那么多,那 ...
- react+redux教程(四)undo、devtools、router
上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo ...
- react+redux教程(三)reduce()、filter()、map()、some()、every()、...展开属性
reduce().filter().map().some().every()....展开属性 这些概念属于es5.es6中的语法,跟react+redux并没有什么联系,我们直接在https:// ...
- react+redux教程(一)connect、applyMiddleware、thunk、webpackHotMiddleware
今天,我们通过解读官方示例代码(counter)的方式来学习react+redux. 例子 这个例子是官方的例子,计数器程序.前两个按钮是加减,第三个是如果当前数字是奇数则加一,第四个按钮是异步加一( ...
- angular开发者吐槽react+redux的复杂:“一个demo证明你的开发效率低下”
曾经看到一篇文章,写的是jquery开发者吐槽angular的复杂.作为一个angular开发者,我来吐槽一下react+redux的复杂. 例子 为了让大家看得舒服,我用最简单的一个demo来展示r ...
随机推荐
- git-bash的alias别名设置
正常需要设置别名时,直接使用 alias gs="git status" 输入上边的命令之后,就可以使用gs(命令)代替git status(命令),这是一种设置别名简化输入,提升 ...
- UI自动化(十四)yaml配置文件
import yamlimport jsonf = open('config.yaml','rb')data = yaml.load(f)print(json.dumps(data,indent=4) ...
- 你不知道的JS(3)来聊聊this
为什么要使用this?什么是this? 来看一段代码 function identify() { return this.name.toUpperCase(); } function speak() ...
- vector内存回收
1. vector所有的内存相关问题都可以归结于它的内存增长策略.vector有一个特点就是:内存空间只会增长不会减少.vector有两个函数,一个是capacity(),返回对象缓冲区(vector ...
- 复旦大学2018--2019学年第一学期(18级)高等代数I期末考试第七大题解答
七.(本题10分) 设 $V$ 为 $n$ 维线性空间, $\varphi,\psi$ 是 $V$ 上的线性变换, 满足 $\varphi\psi=\varphi$. 证明: $\mathrm{Ke ...
- 王之泰 201771010131《面向对象程序设计(java)》第十六周学习总结
第一部分:理论知识学习部分 第14章 并发 ⚫ 线程的概念⚫ 中断线程⚫ 线程状态⚫ 多线程调度⚫ 线程同步 1.程序与进程的概念 1.1程序是一段静态的代码,它是应用程序执行的蓝 本. 1. ...
- P4114 Qtree1
思路 树剖一发,注意对LCA的处理 代码 #include <cstdio> #include <algorithm> #include <cstring> usi ...
- vjson.hpp
//vov #ifndef VJSON_HPP #define VJSON_HPP #include <iostream> #include <string> #include ...
- Unity---在Hierarchy视图中将选中的对象的层级目录复制到剪切板
using UnityEditor; using UnityEngine; public class ObjPathCopyTool : ScriptableObject { [MenuItem(&q ...
- (最完美)红米手机5的Usb调试模式在哪里打开的教程
就在我们使用安卓手机接通PC的时候,或者使用的有些app比如我们企业营销部门就在使用的app引号精灵,之前老版本就需要开启usb开发者调试模式下使用,现就在新版本不需要了,如果手机没有开启usb开发者 ...