Redux:with React(一)
作者数次强调,redux和React没有关系(明明当初就是为了管理react的state才弄出来的吧),它可以和其他插件如 Angular, Ember, jQuery一起使用。好啦好啦知道啦。Redux的初衷就是为了管理UI的状态,触发state的更新作为对action的回应。
文档举的例子是一个todo App。
安装react-redux:
npm install --save react-redux redux
Presentational and Container Components:
React bindings for Redux embrace the idea of separating presentational and container components. If you're not familiar with these terms, read about them first, and then come back. They are important, so we'll wait!
当我们想把redux应用到react中时,要接受一种思想:app中的组件可以分为两类
一类是用于展示内容的组件(P):负责结构和样式,与redux无关,响应props的数据,调用props的方法,组件由开发者设计
一类是作为容器的组件(C):负责数据获取和状态更新,与redux有关,响应state更新,能dispatch action,由react redux生成
C组件能和redux store联系,它是P组件与redux store的桥梁。但不一定要在组件树的顶层。如果C组件太复杂,建议引入另一些C组件来拆分它的逻辑,像split reducer一样。
注意:尽管开发者也可以使用store.subscribe()
手写C组件,但是作者并不建议,他更推荐我们通过react redux 的 connect()
function 来生成C组件,因为通过react redux生成的C组件可以实现性能最优化,这是手写不容易达到的。
举的是todolist的例子
设计组件的层级:
设计展示组建:
TodoList
is a list showing visible todos.todos: Array
is an array of todo items with{ id, text, completed }
shape.onTodoClick(id: number)
is a callback to invoke when a todo is clicked.
Todo
is a single todo item.text: string
is the text to show.completed: boolean
is whether todo should appear crossed out.onClick()
is a callback to invoke when a todo is clicked.
Link
is a link with a callback.onClick()
is a callback to invoke when link is clicked.
Footer
is where we let the user change currently visible todos.App
is the root component that renders everything else.
P组件只负责渲染视图,并不关心数据从哪来的,也不关系数据怎么变更。
Designing Container Components:
VisibleTodoList
filters the todos according to the current visibility filter and renders aTodoList
.FilterLink
gets the current visibility filter and renders aLink
.filter: string
is the visibility filter it represents.
C组件负责将P组件和Redux 联系起来。用户可以通过C组件触发state更新,P组件通过容器获取变更的数据并重新渲染视图。
Designing Other Components:
作者承认有时候很难界定一个组件属于P还是C,对于很简单的组件,如一个todolist的输入框,没必要将其分解。但随着组件的复杂度增大,不难将之分解成P和C两部分。
组件的实现:
1.实现P组件:
http://redux.js.org/docs/basics/UsageWithReact.html#componentstodojs
由于P组件的意义只是渲染DOM,因此P组件其实是没有状态的,只有从父组件/容器组件获取的props,所以可以使用function组件直接返回JSX而不使用Class组件
2.实现C组件:
C组件可以通过subscribe()获取Redux store state树的一部分,作为P组件的props。
作者再次强调使用Redux插件的 connect()构造容器组件。connect方法的意义在于将P组件和C组件连接起来。
使用connet()方法时,需要定义一个名为mapStateToProps
的特殊函数,这个函数描述了怎么把当前的redux store state转换为P组件需要的props:
const getVisibleTodos = (todos, filter) => {
switch (filter) {
case 'SHOW_ALL':
return todos
case 'SHOW_COMPLETED':
return todos.filter(t => t.completed)
case 'SHOW_ACTIVE':
return todos.filter(t => !t.completed)
}
} const mapStateToProps = state => {
return {
todos: getVisibleTodos(state.todos, state.visibilityFilter)
}
}
如上,getVisibleTodos函数是不是很像Reducer中被解构成更小功能的单位,其实就是个内部逻辑单元而已。
只是获取state作为P组件的props还不够。C组件还得能触发dispatch以更新state,所以还有另一个特殊函数mapDispatchToProps,它的参数是dispatch()函数:
const mapDispatchToProps = dispatch => {
return {
onTodoClick: id => {
dispatch(toggleTodo(id))
}
}
}
有了这两个函数之后,容器组件的方法才算基本完善,调用connect()将之作为参数传进去:
import { connect } from 'react-redux' const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList) export default VisibleTodoList
这是connect()生成容器组件的基本套路,connect()的返回值是个函数,再执行一次返回容器。第二个括号中的传参是个P组件,表示生成的C组件是该P组件的容器。
访问store:
在应用程序中,往往有多个层级的组件,使用react redux后当我们的容器想访问store时,一种方法是将store作为props传下去,让子组件可以访问它。但是这样太麻烦了,因为你必须每一级都把它传递下去。一种推荐的做法是,使用<Provider>组件。我们只需要在根组件渲染时使用它:
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App' let store = createStore(todoApp) render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
总结:
1.在设计应用的组件时,先理清应用的模块的划分,然后对每个模块进行实现。
2.对应用划分好模块之后,针对每个模块,先设计好它的state的结构,知道哪些state是负责处理data的,哪些是负责UI渲染的。
3.设计好一个模块的state之后,创建需要的action对象,并创建对应的reducer函数,然后生成store。
4.创建展示组件,负责渲染内容。
5.利用connect()方法生成容器组件,包含mapstate和mapdispatch方法,用以获取当前state、触发state更新。
6.在最顶层index页面ReactDOM.render渲染应用时,组件最外层被<Provider store={store}></Provider>包裹,以全局提供store的引用。
Redux:with React(一)的更多相关文章
- Redux 和React 结合
当Redux 和React 相接合,就是使用Redux进行状态管理,使用React 开发页面UI.相比传统的html, 使用React 开发页面,确实带来了很多好处,组件化,代码复用,但是和Redux ...
- redux在react项目中的应用
今天想跟大家分享一下redux在react项目中的简单使用 1 1.redux使用相关的安装 yarn add redux yarn add react-redux(连接react和redux) 2. ...
- 使用Redux管理React数据流要点浅析
在图中,使用Redux管理React数据流的过程如图所示,Store作为唯一的state树,管理所有组件的state.组件所有的行为通过Actions来触发,然后Action更新Store中的stat ...
- [Redux] Adding React Router to the Project
We will learn how to add React Router to a Redux project and make it render our root component. Inst ...
- Redux和React
export app class Compo1 extends Component{ } Compo1.propType = { a:PropTypes.string, fn:PropTypes.fu ...
- Redux 管理React Native数据
现在让我们看看大致的流程: React 可以触发 Action,比如按钮点击按钮. Action 是对象,包含一个类型以及相关的数据,通过 Store 的 dispatch() 函数发送到 Store ...
- redux【react】
首先介绍一下redux就是Flux的一种进阶实现.它是一个应用数据流框架,主要作用应用状态的管理 一.设计思想: (1).web应用就是一个状态机,视图和状态一一对应 (2).所有的状态保存在一个对象 ...
- react+redux教程(八)连接数据库的redux程序
前面所有的教程都是解读官方的示例代码,是时候我们自己写个连接数据库的redux程序了! 例子 这个例子代码,是我自己写的程序,一个非常简单的todo,但是包含了redux插件的用法,中间件的用法,连接 ...
- 实例讲解react+react-router+redux
前言 总括: 本文采用react+redux+react-router+less+es6+webpack,以实现一个简易备忘录(todolist)为例尽可能全面的讲述使用react全家桶实现一个完整应 ...
- react+redux教程(二)redux的单一状态树完全替代了react的状态机?
上篇react+redux教程,我们讲解了官方计数器的代码实现,react+redux教程(一).我们发现我们没有用到react组件本身的state,而是通过props来导入数据和操作的. 我们知道r ...
随机推荐
- Xshell下载和连接Linux
Xshell下载和连接Linux 第一步.Xshell的下载 方法1:从官网下载个人使用时免费的,商业使用是要收费的. http://www.xshellcn.com/ 方法二2:百度云下载Xshel ...
- python学习笔记(三)---字典
字典 在Python中,字典 字典 是一系列键 键-值对 值对 .每个键 键 都与一个值相关联,你可以使用键来访问与之相关联的值.与键相关联的值可以是数字.字符串.列表乃至字典.事实上,可将 任何Py ...
- Python 删除含有只读文件(夹)的文件夹
def rm_read_only(fn, tmp, info): if os.path.isfile(tmp): os.chmod(tmp, stat.S_IWRITE) os.remove(tmp) ...
- VS中的生成和重新生成的区别
2019独角兽企业重金招聘Python工程师标准>>> 生成 在上次编译的基础上,只对改动过的文件重新生成,没有改动过的文件不会重新生成. 重新生成 对所有的文件都重新生成.如果引用 ...
- spring boot 集成mybatis使用logback打印并保存日志信息
spring boot 打印执行的sql语句 最近在学习spring boot 整合了Mybatis和druid之后总感觉少点什么东西,看了下在别的项目上用的框架,发现自己整合的东西不打印sql语句, ...
- php并发加锁
CleverCode在工作项目中,会遇到一些php并发访问去修改一个数据问题,如果这个数据不加锁,就会造成数据的错误.下面CleverCode将分析一个财务支付锁的问题. 1 没有应用锁机制 1.1 ...
- 数据库SQL语言从入门到精通--Part 2--MySQL安装
数据库从入门到精通合集(超详细,学习数据库必看) 首先给出的简单安装方式,文末给出标准的安装方式. 第一步下载我的压缩包 链接:https://pan.baidu.com/s/1EE40dU0j2U1 ...
- 编译原理-第四章 语法分析-4.7 规范的LR分析
规范的LR分析 一.规范LR(l)项 二.规范LR(l)项集族 1.构建项目集 2.例 三.规范LR(1)语法分析表 1.构造 2.例1 3.例2 四.LALR语法分析表 1.重要性 2.特点 3.构 ...
- wmic 内网使用
先决条件: 1.远程服务器启动Windows Management Instrumentation服务,开放TCP135端口,防火墙放开对此端口的流量(默认放开): 2.远程服务器的本地安全策略的“网 ...
- 前缀和(P2697 宝石串)
前言 每次做出来什么本来做不出的题目,就忍不住记录一下.不过大多时候隔几天来看,就发现,啊,我当时只是做了一道这么弱智的题目呀,哈哈.前缀和确实不算太难.. 传送门 题目大意: 给你一个字符串只含G和 ...