作者数次强调,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的例子

设计组件的层级:

复习一下Thinking in React

设计展示组建:

  • 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 a TodoList.
  • FilterLink gets the current visibility filter and renders a Link.
    • 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(一)的更多相关文章

  1. Redux 和React 结合

    当Redux 和React 相接合,就是使用Redux进行状态管理,使用React 开发页面UI.相比传统的html, 使用React 开发页面,确实带来了很多好处,组件化,代码复用,但是和Redux ...

  2. redux在react项目中的应用

    今天想跟大家分享一下redux在react项目中的简单使用 1 1.redux使用相关的安装 yarn add redux yarn add react-redux(连接react和redux) 2. ...

  3. 使用Redux管理React数据流要点浅析

    在图中,使用Redux管理React数据流的过程如图所示,Store作为唯一的state树,管理所有组件的state.组件所有的行为通过Actions来触发,然后Action更新Store中的stat ...

  4. [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 ...

  5. Redux和React

    export app class Compo1 extends Component{ } Compo1.propType = { a:PropTypes.string, fn:PropTypes.fu ...

  6. Redux 管理React Native数据

    现在让我们看看大致的流程: React 可以触发 Action,比如按钮点击按钮. Action 是对象,包含一个类型以及相关的数据,通过 Store 的 dispatch() 函数发送到 Store ...

  7. redux【react】

    首先介绍一下redux就是Flux的一种进阶实现.它是一个应用数据流框架,主要作用应用状态的管理 一.设计思想: (1).web应用就是一个状态机,视图和状态一一对应 (2).所有的状态保存在一个对象 ...

  8. react+redux教程(八)连接数据库的redux程序

    前面所有的教程都是解读官方的示例代码,是时候我们自己写个连接数据库的redux程序了! 例子 这个例子代码,是我自己写的程序,一个非常简单的todo,但是包含了redux插件的用法,中间件的用法,连接 ...

  9. 实例讲解react+react-router+redux

    前言 总括: 本文采用react+redux+react-router+less+es6+webpack,以实现一个简易备忘录(todolist)为例尽可能全面的讲述使用react全家桶实现一个完整应 ...

  10. react+redux教程(二)redux的单一状态树完全替代了react的状态机?

    上篇react+redux教程,我们讲解了官方计数器的代码实现,react+redux教程(一).我们发现我们没有用到react组件本身的state,而是通过props来导入数据和操作的. 我们知道r ...

随机推荐

  1. Unity 芯片拼图算法

    很多游戏的养成系统中会有利用芯片或者碎片来合成特定道具的功能,或者来给玩家以额外的属性提升等,先截个图以便更好说明: 如上图,我们有各种各样形状迥异的碎片,上面只不过列举了其中一部分,现在,我们需要利 ...

  2. tensor求和( tensor.sum())

    1. torch.sum(input, dim, out=None) 参数说明: input:输入的tensor矩阵. dim:求和的方向.若input为2维tensor矩阵,dim=0,对列求和:d ...

  3. PHP如何实现判断提交的是什么方式

    function get_request_method() { // $_SERVER包含了诸多头信息.路径.以及脚本位置等等信息的数组,这个数组中的项目有web服务器创建. if (isset($_ ...

  4. 基于centos7搭建kvm

    其他的和安装一般的系统没有差别 安装完成后. 1]使用ping www.baidu.com 2]修改静态ip,也可以不修改 3]下载brctlyum -y install bridge-utils 4 ...

  5. JDK14的新特性:Lombok的终结者record

    目录 简介 新的Record类型 探讨Record的秘密 record扩展 总结 JDK 14的新特性:Lombok的终结者record 简介 自从面向对象产生之后,程序界就开始了新的变化,先是C发展 ...

  6. ansible一键安装mysql8.0

    ansbile安装: # ansible在CentOS7中需要安装epel仓库 yum install -y epel-release yum install -y ansible 安装有好几种方法, ...

  7. HyperLeger Fabric开发(三)——HyperLeger Fabric架构

    HyperLeger Fabric开发(三)--HyperLeger Fabric架构 一.HyperLeger Fabric逻辑架构 1.HyperLeger Fabric逻辑架构简介 Fabric ...

  8. 将A页面提交的数据id传递到B页面

    A页面 在A页面跳转到B页面的时候,在url后面可以拼接参数 例如: window.location.href = './B.html?' + id; 跳转到B页面之后,可以通过url地址获取到从A页 ...

  9. 算法---BitMap

    问题: 假设有3亿个整数(范围0-2亿),如何判断某一个树是否存在.局限条件一台机器,内存500m. 常规的思路:我们可以将数据存到一个集合中,然后判断某个数是否存在:或者用一个等长的数组来表示,每个 ...

  10. socket编程之并发回射服务器2

    承接上文:socket编程之并发回射服务器 为了让服务器进程的终止一经发生,客户端就能检测到,客户端需要能够同时处理两个描述符:套接字和用户输入. 可以使用select达到这一目的: void str ...