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的更多相关文章

  1. React + Redux 入坑指南

    Redux 原理 1. 单一数据源 all states ==>Store 随着组件的复杂度上升(包括交互逻辑和业务逻辑),数据来源逐渐混乱,导致组件内部数据调用十分复杂,会产生数据冗余或者混用 ...

  2. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  3. react+redux教程(五)异步、单一state树结构、componentWillReceiveProps

    今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...

  4. react+redux官方实例TODO从最简单的入门(6)-- 完结

    通过实现了增-->删-->改-->查,对react结合redux的机制差不多已经了解,那么把剩下的功能一起完成吧 全选 1.声明状态,这个是全选状态 2.action约定 3.red ...

  5. react+redux官方实例TODO从最简单的入门(1)-- 前言

    刚进公司的时候,一点react不会,有一个需求要改,重构页面!!!完全懵逼,一点不知道怎么办!然后就去官方文档,花了一周时间,就纯react实现了页面重构,总体来说,react还是比较简单的,由于当初 ...

  6. 重写官方TodoList,对于初学react+redux的人来说,很有好处

    虽然官网的TodoList的例子写的很详细,但是都是一步到位,就是给你一个action,好家伙,全部都写好了,给你一个reducer,所有功能也是都写好了,但是我们这些小白怎么可能一下就消化那么多,那 ...

  7. react+redux教程(四)undo、devtools、router

    上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo ...

  8. react+redux教程(三)reduce()、filter()、map()、some()、every()、...展开属性

    reduce().filter().map().some().every()....展开属性   这些概念属于es5.es6中的语法,跟react+redux并没有什么联系,我们直接在https:// ...

  9. react+redux教程(一)connect、applyMiddleware、thunk、webpackHotMiddleware

    今天,我们通过解读官方示例代码(counter)的方式来学习react+redux. 例子 这个例子是官方的例子,计数器程序.前两个按钮是加减,第三个是如果当前数字是奇数则加一,第四个按钮是异步加一( ...

  10. angular开发者吐槽react+redux的复杂:“一个demo证明你的开发效率低下”

    曾经看到一篇文章,写的是jquery开发者吐槽angular的复杂.作为一个angular开发者,我来吐槽一下react+redux的复杂. 例子 为了让大家看得舒服,我用最简单的一个demo来展示r ...

随机推荐

  1. git-bash的alias别名设置

    正常需要设置别名时,直接使用 alias gs="git status" 输入上边的命令之后,就可以使用gs(命令)代替git status(命令),这是一种设置别名简化输入,提升 ...

  2. UI自动化(十四)yaml配置文件

    import yamlimport jsonf = open('config.yaml','rb')data = yaml.load(f)print(json.dumps(data,indent=4) ...

  3. 你不知道的JS(3)来聊聊this

    为什么要使用this?什么是this? 来看一段代码 function identify() { return this.name.toUpperCase(); } function speak() ...

  4. vector内存回收

    1. vector所有的内存相关问题都可以归结于它的内存增长策略.vector有一个特点就是:内存空间只会增长不会减少.vector有两个函数,一个是capacity(),返回对象缓冲区(vector ...

  5. 复旦大学2018--2019学年第一学期(18级)高等代数I期末考试第七大题解答

    七.(本题10分)  设 $V$ 为 $n$ 维线性空间, $\varphi,\psi$ 是 $V$ 上的线性变换, 满足 $\varphi\psi=\varphi$. 证明: $\mathrm{Ke ...

  6. 王之泰 201771010131《面向对象程序设计(java)》第十六周学习总结

        第一部分:理论知识学习部分 第14章 并发 ⚫ 线程的概念⚫ 中断线程⚫ 线程状态⚫ 多线程调度⚫ 线程同步 1.程序与进程的概念 1.1程序是一段静态的代码,它是应用程序执行的蓝 本. 1. ...

  7. P4114 Qtree1

    思路 树剖一发,注意对LCA的处理 代码 #include <cstdio> #include <algorithm> #include <cstring> usi ...

  8. vjson.hpp

    //vov #ifndef VJSON_HPP #define VJSON_HPP #include <iostream> #include <string> #include ...

  9. Unity---在Hierarchy视图中将选中的对象的层级目录复制到剪切板

    using UnityEditor; using UnityEngine; public class ObjPathCopyTool : ScriptableObject { [MenuItem(&q ...

  10. (最完美)红米手机5的Usb调试模式在哪里打开的教程

    就在我们使用安卓手机接通PC的时候,或者使用的有些app比如我们企业营销部门就在使用的app引号精灵,之前老版本就需要开启usb开发者调试模式下使用,现就在新版本不需要了,如果手机没有开启usb开发者 ...