Redux:action

引入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()的方式使用。这个以后再讨论。

时间: 2024-10-01 00:23:09

Redux:action的相关文章

Redux生态系统

生态系统 Redux 是一个体小精悍的库,但它相关的内容和 API 都是精挑细选的,足以衍生出丰富的工具集和可扩展的生态系统. 如果需要关于 Redux 所有内容的列表,推荐移步至 Awesome Redux.它包含了示例.样板代码.中间件.工具库,还有很多其它相关内容.要想学习 React 和 Redux ,React/Redux Links 包含了教程和不少有用的资源,Redux Ecosystem Links 则列出了 许多 Redux 相关的库及插件. 本页将只列出由 Redux 维护者

React & Redux 的一些基本知识点

一.React.createClass 跟 React.Component 的区别在于后者使用了ES6的语法,用constructor构造器来构造默认的属性和状态. 1. React.createClass import React from 'react';       const Contacts = React.createClass({             render() {                return (                    <div><

redux的使用

https://www.jianshu.com/p/7a6708cde333 安装:yarn add redux  react-redux --save redux分为三个部分组成action  reducer  store action可以触发reducer中的state   在改变共享状态的文件处使用 const { dispatch } = this.props;   //使用connect后会生成dispatch dispatch(switchMenu(title)); export c

Redux 进阶之 react-redux 和 redux-thunk 的应用

1. react-redux React-Redux 是 Redux 的官方 React 绑定库. React-Redux 能够使你的React组件从Redux store中读取数据,并且向 store 分发 actions 以更新数据. React-Redux 并不是 Redux 内置,需要单独安装. React-Redux 一般会和 Redux 结合一起使用. react-redux 安装 $ npm install react-redux Provider 和 connect React-

Redux 一步到位

简介 Redux 是 JavaScript 状态容器,提供可预测化的状态管理 Redux 除了和 React 一起用外,还支持其它库( jquery ... ) 它体小精悍(只有2kB,包括依赖) 由 Flux 演变而来,但受 Elm 的启发,避开了 Flux 的复杂性. 安装 稳定版 npm install --save redux 附加包 React 绑定库 npm install --save react-redux 附加包 开发者工具 npm install --save-dev red

Unity - UIWidgets 7. Redux接入(二) 把Redux划分为不同数据模块

参考QF.UIWidgets 参考Unity官方示例 - ConnectAppCN 前面说过,当时没想明白一个问题,在reducer中每次返回一个new State(), 会造成极大浪费,没想到用什么办法来解决. 然后发现这些示例里面并没有每次创建一个新的State,只是直接修改了相应的值--那这样就简单多了.把Redux结构划分为不同数据模块,更方面管理. 在这里从头做一个简单的demo,包含两个页面:"homepage",显示一条信息, "newpage",显示

react-router搭配react-redux无法监听路由变化的问题

在react中,要将react组件连接到redux中,通常会这样包装组件 class Home extends Component { } function select(state) { return { logBox:state.logBox } } export default connect(select)(Home) 但是当搭配react-router的时候,在进行路由跳转的时候,组件不会重新render.这个时候看react-redux的connect方法的说明: connect([

React 实践项目 (二)

React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架.而我学习React也有一段时间了,现在就开始用 React+Redux 进行实战! React 实践项目 (一)本次实践代码 部署好的网址 上回说到用React写了一个带Header的首页,我们这次实践就使用Redux进行状态管理 Rudex 应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中.惟一改变 state 的办法是触发 action,一个描述发生什么的对象.为了描述 a

React 实践项目 (四)

React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架.而我学习React也有一段时间了,现在就开始用 React+Redux 进行实战! 上回说到使用Redux-saga 管理 Redux 应用异步操作,应用还是只有一个首页.现在开始构建一个新的投稿页面并使用 React-Router 进行路由管理. React 实践项目 (一)React 实践项目 (二)React 实践项目 (三)React 实践项目 (四) - 首先我们来构建投稿页面 创建 src/co