数据流是我们的行为与响应的抽象;使用数据流能帮我们明确了行为对应的响应,这和 react 的状态可预测的思想是不谋而合的。
常见的数据流框架有
。相比其它数据流框架,Redux 轻量 (压缩后只有 2K), 而且在一个 react 项目中,Redux 维护了单一的状态树。
- Flux/reFlux/Redux
下面我们来具体看看为什么要使用数据流
不只是前端,很多系统开发的时候遵从的都是 MVC 分离,也就是数据放在 Model 里面,View 来控制显示,Controler 做整体的管理。但是随着系统的庞大,它会产生一系列问题。比如举个例子,我们上网 shopping,提交订单,那么用户的账号,优惠信息,物流信息,库存等等的 Model 都会发生更新变化,然后 View 上的显示也会随之变化,反过来,View 的有些变化也会对 Model 产生影响,这样就使用户下了一个订单以后界面会变得什么样变得不可预测。
所以在 React 出现的同时 Facebook 也搞出了一个 Flux 数据流 (React 是纯 V 层框架,需要数据流进行支撑),它的思想如下:
它认为用户有各种各样的 Action, 然后所有的 Action 由一个统一的 Dispacher 分发到若干个 Store 里去,这个 Store 保存着数据也保存着页面的状态,根据数据和页面的状态,一个 store 只能向视图层传递信息,而不允许视图层再返回来作用到 Store 上,然后视图就发生更新,然后再由用户传入新的操作。这样子我们就能预测到 Action 作用到 Store 上时,View 发生什么变化。
那 Redux 是 Flux 的一种实现方法,但是也有些许不一样,它的思想如下
当页面渲染完,UI 就出现了,然后用户触发 UI 上的 Action,然后 Action 被送到 Reducer 这个方法里去,然后 Reducer 更新了 Store,Store 里包含 react 开发的 State,最后 State 决定 UI 层的展现。这就是 Redux 的一个完整过程。
react-redux 安装:
- npminstallreact-redux redux
redux 本身就是一个工具流,而 react-redux 则是对 redux 的绑定。类似的还有 ng2-redux、backbone-redux 等
项目结构
四个重要的文件夹:
– actions:行为
– components:组件
– container:容器组件
– reducer:Store 里分发 Action 的方法
下面对各个部分进行举例(一个简单的待办项小 demo):
action:(1. 是行为的抽象;2. 是普通 JS 对象;3. 一般由方法生成;4. 必须有一个 type)
- const addTodo = (text) = >{
- return {
- type: 'ADD_TODO',
- //必须要有type
- id: nextTodoId++,
- text
- }
- }
reducer:(1. 是响应的抽象;2. 纯方法(非存方法是指比如依赖当前的时间))
- /* 传入旧的state和作用的action返回一个新state */
- const todo = (state, action) = >{
- switch (action.type) {
- case 'ADD_TODO':
- return {
- id:
- action.id,
- text: action.text,
- completed: false // 刚传入的待办项未完成
- }
- case 'TOGGLE_TODO':
- if (state.id !== action.id) {
- return state
- }
- return Object.assign({},
- state, { // 把state和completed合并成一个对象返回
- completed: !state.completed
- })
- default:
- return state
- }
- }
store:(reducer 和 state 的集合)
- import {
- createStore
- }
- from 'redux'import todoApp from './reducers'let store = createStore(todoApp)
打印 store:
组件:
redux 并不知道 component 组件的存在,而只知道 container 组件的存在,所以数据流从 redux 流入 container 组件,container 在通过 props 传参的形式,传入 component 组件。
一般来说 componet 组件是如何显示,比较容易复用,而 container 却是和我们的业务联系比较紧密,不容易复用。
项目 demo 代码: https://github.com/guopingxiao/weber-study-demos/tree/master/06react/react-redux-todos-master
来源: http://blog.csdn.net/i10630226/article/details/72513771