【12】react 之 redux(1)

TodoList小demo

效果展现

项目地址

(单向)数据流

数据流是咱们的行为与响应的抽象；使用数据流能帮咱们明确了行为对应的响应，这和react的状态可预测的思想是不谋而合的。

常见的数据流框架有Flux/reFlux/Redux。相比其它数据流框架，Redux轻量(压缩后只有2K),并且在一个react项目中，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安装:

npm install react-redux redux

redux自己就是一个工具流，而react-redux则是对redux的绑定。相似的还有ng2-redux、backbone-redux等

回到顶部(go to top)

项目结构

四个重要的文件夹：

-- actions：行为

-- components：组件

-- container：组件

-- reducer：Store里分发Action的方法

- index.html：模板文件

- server.js

- webpack

下面对各个部分进行举例（一个简单的待办项小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:(1.action做用于store；2.reducer根据store响应；3.对于redux来讲，store是惟一的；4.store包括了完整的state；5.state彻底可预测)

import { createStore } from 'redux'
import todoApp from './reducers'

let store = createStore(todoApp)

打印store：

组件：

转载：http://www.cnblogs.com/MuYunyun/p/6241924.html

推荐：redux学习网址：

http://www.ruanyifeng.com/blog/2016/09/react-technology-stack.html

项目地址：https://github.com/MuYunyun/reactSPA