react系列（四）Redux基本概念和使用

Redux基本概念和使用

先从Flux开始

先放一个Flux官网的连接。须要fq。
Flux是Facebook提出的一种构建客户端网页应用的应用架构，它是一种抽象程度很高的设计模式，鼓励单向数据流。
在以前的MVC架构中，在小型应用中，Model和View较少时，关系不复杂，维护轻松。可是一旦功能愈来愈复杂，将难以维护，多个Model和多个View之间存在着多对多的关系，在开发时，须要花费不少时间去处理Modal间的关系。
Flux架构的关键在于单向数据流，他由三部分构成——

1. dispatcher
2. stores
3. views（React components）

从一次Action触发，Dispatcher将它dispatch到store，更新store，store的变化同步更新到对应的view层。等待下一次的Action触发。
这个过程当中，数据始终是单向流动的。

社区基于Flux有多种实现，其中Dan大神的Redux最受推崇，已经成为事实标准。

Redux

前面的文章提到了组件间通讯的几种方式，context API在小规模共享应用时值得一试。今天主要讲解react全家桶中的Redux。

概念

在说概念以前，先看一张图：

| 图片来源 https://css-tricks.com/learning-react-redux/
根据上面的图片，能够发现Redux至关于一个全局的Provider。各个子组件是Consumer。
固然，Redux不仅是简单的提供一个全局Provider。
它有如下几个特色：

1.惟一数据源
不一样于Flux的实现，Redux只有一个惟一的数据源，它提供一个深层嵌套的对象来存放全部数据。
2.状态只读
在Redux中，全部的状态都是只读的，若是要修改state，则须要dispatch一个action，reducer经过action的type，选择执行不一样的操做，返回新的状态。
3.经过纯函数改变状态
纯函数的概念很简单，一个函数，给定输入，则肯定输出，不受其余因素影响，也不会影响原来的引用。
因为Redux提倡纯函数对状态进行处理，不会更改以前的对象，对于操做

fn(x) = y;

只要x给定，则y必定是确认值。这样不管是以后进行很方便来追踪数据的更改，debug，时间回溯，都很是方便。

使用

Redux的API很是简单，这里是Redux API文档。
咱们只须要使用两个API就能使用到Redux。

// 建立一个Reducer
let countReducer = (state = 0, action) => {
  if (action.type === 'ADD') {
    state++;
  }
  return state;
}

// 建立一个Store
var store = Redux.createStore(countReducer);

// dispatch一个action
store.dispatch({
  type: 'ADD'
});

若是有多个State，好比，count和user，则须要使用combineReducers方法。

import { createStore, combineReducers } from 'redux';

// The User Reducer
const userReducer = (state = {}, action) => {
  return state;
}

// The Widget Reducer
const countReducer = (state = {}, action) => {
  return state;
}

// Combine Reducers
const reducers = combineReducers({
  userState: userReducer,
  countState: countState,
});

const store = createStore(reducers);

在实际使用时，有ActionCreateor的概念，其实并不复杂，就是一个函数，返回响应的Action。能够在这个函数中对Action作一些逻辑的判断处理。

CountActionCreators.js

export function plus() {
  return {
    type: 'PLUS'
  };
}

export function minus() {
  return {
    type: 'MINUS'
  };
}

接下来须要调用bindActionCreators。

let one = bindActionCreators({ plusOne, minusOne }, store.dispatch);
store.subscribe(() => console.log(store.getState()));

one.plusOne();
one.minusOne();

这里是一个完整的例子-codesandbox。

下一篇讲解在React中使用Redux。 感谢阅读。