天天看点

React + Redux 入坑指南ReduxReact + ReduxConclusion

1. 单一数据源

<code>all states =&gt; store</code>

随着组件的复杂度上升(包括交互逻辑和业务逻辑),数据来源逐渐混乱,导致组件内部数据调用十分复杂,会产生数据冗余或者混用等情况。

store 的基本思想是将所有的数据集中管理,数据通过 store 分类处理更新,不再在组件内放养式生长。

2. 单向数据流

<code>dispatch(actioncreator) =&gt; reducer =&gt; (state, action) =&gt; state</code>

单向数据流保证了数据的变化是有迹可循且受控制的。

通过绑定 store 可以确定唯一数据来源。

actioncreator 通过 dispatch 触发,使组件内事件调用逻辑清晰,具体的事件处理逻辑不用放在组件写,保持 view 层的纯净。

reducer 通过判断不同的 actiontype 处理不同数据更新,保证数据有秩序更新。

actiontype 定义操作类型

actioncreator 定义操作具体执行函数

actiontype 提供给 reducer 判断动作类型

actioncreator 为可调用的执行函数,必须返回 actiontype 类型

redux-thunk 配置

action 使用 redux-thunk

引入 action 中定义好的 actiontype

传入 初始数据 和 actiontype 后,返回更新数据

通过 redux 提供的 combinereducers 将不同处理逻辑的 reducer 合并起来。

使用 react-redux 提供的 provider 可以将 store 注入到 react 中。

store 将合并后的 reducers 通过 createstore 创建,此外下面示例代码还使用中间件加入了一层 react-thunk 处理。

使用 react-redux 提供的 connect 方法 将组件和所需数据绑定。

需要注意的是,store 创建时接收的是合并后的 reducers, 因此不同 reducer 上的处理数据绑定在了不同 reducer 对象上,而不是全部挂载在 store 上。

react bindings for redux embrace the idea of separating presentational and container components. redux 的 react 绑定库包含了 容器组件和展示组件相分离 的开发思想。

presentational components 展示型组件

container components 容器型组件

展示型组件和容器型组件的区别在官方文档中已经给出很详细的解释了,但是中文文档的翻译有误,所以直接看英文比较更容易懂。

presentational components

container components

purpose

how things look (markup, styles)

how things work (data fetching, state updates)

aware of redux

no

yes

to read data

read data from props

subscribe to redux state

to change data

invoke callbacks from props

dispatch redux actions

are written

by hand

usually generated by react redux

组件类型区分的模糊点在于怎么界定组件的内部功能规划。如果判定一个组件为展示型组件,那么它所需数据和处理方法都应该从父级传入,保持组件内部“纯净”。

在实际开发中,一个组件的逻辑跟业务紧密相关。如果需要将数据和方法从外部传入,那么父级组件所做的事情会很多,多重的子组件也会把父级逻辑弄乱,这就不是 redux 的初衷了。

中文文档翻译的意思是:容器组件应该为路由层面的组件,但这样既不符合实际开发需要,也违背了 redux 思想。真正界定两种组件的因素是:

展示型组件: 类似纯模板引擎,外加一层样式渲染,只负责渲染从props传进来的数据或者监听事件和父组件做小联动。它是“纯净”的,不需要使用到 redux 的一套规则。

容器型组件: 需要异步获取数据,更新组件状态等等。需要跟业务逻辑打交道的组件都可以认为是容器组件。这些逻辑的复杂性需要将数据整合到 store 里统一管理。

组件渲染完成后调用action

当组件 connect 后,dispatch 方法已经注入到 props 中,所以触发 action 可以从 props 获取 dispatch 方法。

组件模板内调用action

组件内部所需的渲染数据都已经绑定在了 props 上,直接获取即可。

需要注意的是,在事件监听中触发 action,需要用一个匿名函数封装,否则 react 在渲染时就会执行事件绑定事件,而不是当事件发生再执行。

容器组件传递方法

容器型组件需要连接 redux,使用 dispatch 触发 actioncreator。

展示型组件需要用到的方法调用在容器型组件内定义好,通过 props 传入到展示型组件中。

展示组件接收props

展示型组件不需要用到 redux 的一切,它的 props 仅仅存在于父级传入的数据和方法。

图示箭头代表各概念之间的相互关系,不代表数据流。( 能理解下面这张图,这篇文章就没白看了 -。- )

React + Redux 入坑指南ReduxReact + ReduxConclusion

参考文档

<a href="http://redux.js.org/">redux 英文文档</a>

<a href="http://cn.redux.js.org/index.html">redux 中文文档</a>

end.

继续阅读