这一篇是接上一篇“react进阶座谈”的第二篇，这一篇重要剖析redux的头脑和运用，一样参考了收集上的大批材料，但代码一样都是本身尝试实践所得，在这里分享出来，仅供一同进修(上一篇地点:个人博客／segmentFault)
注：本文中的一切示例代码，已合成一个小的demo放在了这里，假如你以为这个demo对你的进修起到了一点协助，请给star以支撑。
redux 简介
本文默许人人控制一些react和flux架构的相干学问，也用过或许相识过redux，所以并不会从最基础的讲起，而是直接对redux举行总结。假如没有效过redux，最好能够先看这里
想要明白redux，我们起首要总结redux的一些设想准绳：
单一数据源
Redux中只要效单一个对象大树构造来的存储全部运用的状况，也就是全部运用中会用到的数据，称之为store(存储)。store除了存储的数据，还能够存储全部运用的状况（包括router状况，后文有引见），所以，经由历程store，完成一个对全部运用的立即保留功用(竖立快照)变成能够，别的这类设想也为服务端衬着供应了能够。
状况是只读的
这一点相符flux的设想理念，我们并不能在components内里变动store的状况（实际上redux会依据reducer天生store)，而是只能经由历程dispatch，触发action对当前状况举行迭代，这里我们也并没有直接修正运用的状况，而是返回了一份全新的状况。
状况修正均由纯函数组成
Redux中的reducer的原型会长得像下面如许，你能够把它看成就是 之前的状况 + 行动 = 新的状况 的公式:
(previousState, action) => newState每个reducer都是纯函数，这意味着它没有任何副作用，这类设想的优点不仅在于用reducer对状况修正变的简朴，地道能够测试，别的，redux能够保留各个返回状况从而方便地天生时刻游览，跟踪每一次因为动身action而致使变动的结果。
我们假如在react中运用redux，同时须要react-redux 和 redux。
redux 架构与源码剖析
这一部份重要谈一点本身的明白，能够有些笼统，也能够不完全准确，可直接跳过。
createStore
redux中中心的要领是createStore，react的中心功用全都掩盖在createStore和其终究天生的store中，createStore要领本身支撑传入reducer、initialState、enhancer三参数，enhancer能够作为加强的包装函数，这个我们并非异常经常使用。
这个函数内部保护了一个currentState，而且这个currentState能够经由历程getState函数(内置)返回，别的本身实际上是完成了一个宣布-定阅形式，经由历程store.subscribe来定阅事宜，这个事变由react-redux来协助我们隐式完成，这是为了在有dispatch的时刻触发一切监听从而更新全部状况树。别的，内置的dispatch函数在经由一系列校验后，触发reducer，以后state被变动，以后顺次挪用监听，完成全部状况树的更新。
middleWare
用过redux的朋侪实际上都关于redux-thunk等中间件并不生疏，实际上许多时刻这是不可缺乏的，redux对middleWare也有很好的支撑，这类理念我以为和nodejs的中间件机制有些相似：action顺次经由各个middleWare然后传给下一个，每个middleWare也能够举行别的的操纵比方中缀或许转变action，晓得终究的处置惩罚函数交给reducer。
redux的applyMiddleware函数异常精华精辟：
export default function applyMiddleware(...middlewares) {
return (createStore) => (reducer, preloadedState, enhancer) => {
var store = createStore(reducer, preloadedState, enhancer)
var dispatch = store.dispatch
var chain = []
var middlewareAPI = {
getState: store.getState,
dispatch: (action) => dispatch(action)
//注重这里的dispatch并非一开始的store.dispatch，实际上是变化了的
}
chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch)
return {
...store,
dispatch
}
}
}中心是dispatch = compose(...chain)(store.dispatch)，这句话是关于各个中间件的链式挪用，个中compose的源代码：
export default function compose(...funcs) {
if (funcs.length === 0) {
return arg => arg
}
if (funcs.length === 1) {
return funcs[0]
}
const last = funcs[funcs.length - 1]
const rest = funcs.slice(0, -1)
return (...args) => rest.reduceRight((composed, f) => f(composed), last(...args))
}挪用上一个函数的实行结果给下一个函数。
实际上我们要写一个middleware的历程也异常简朴，比方redux-trunk实际上就这点内容：
function createThunkMiddleware(extraArgument) {
return ({ dispatch, getState }) => next => action => {
if (typeof action === 'function') {
return action(dispatch, getState, extraArgument);
}
return next(action);
};
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;redux 与路由
固然，我们起首声明react东西集的react-router并不一定必需搭配redux运用，只是redux别的有一个react-router-redux能够搭配react-router以及redux运用，结果异常好。
因为我们这部份并非引见react-router怎样运用的，关于react-router的用法请参考中文文档。
react-router的特征
许可开发者经由历程JSX标签来声明路由，这一点让我们路由写起来异常友爱，而且声明式路由的表述才能比较强。
嵌套路由以及路由婚配：能够在指定的path中通报参数:
<Route path="/mail/:mailId" component={Mail} />别的假如参数是可选的，我们经由历程括号包起来即可(:可选参数)。
支撑多种路由切换体式格局：我们晓得如今的路由切换体式格局无外乎运用hashchange和pushState，前者有比较好的浏览器兼容性，然则却并不像一个真正的url，而后者给我们供应文雅的url体验，然则却须要服务端处理恣意途径革新的题目(服务端要自动重定向到首页)。
为何须要react-router-redux
简朴的说，react-router-redux让我们能够把路由也看成状况的一部份，而且能够运用redux的体式格局转变路由：直接挪用dispatch：this.props.push(“/detail/”);，如许把路由也看成一个全局状况，路由状况也是运用状况的一部份，如许能够更有利于前端状况治理。
react-router-redux是须要合营react-router来运用的，并不能零丁运用，在底本的项目中添加上react-router-redux也不庞杂：
import { createStore, combineReducers, compose, applyMiddleware } from 'redux';
import { routerReducer, routerMiddleware } from 'react-router-redux';
import { hashHistory } from 'react-router';
import ThunkMiddleware from 'redux-thunk';
import rootReducer from './reducers';
import DevTools from './DevTools';
const finalCreateStore = compose(
applyMiddleware(ThunkMiddleware,routerMiddleware(hashHistory)),
DevTools.instrument()
)(createStore);
console.log("rootReducer",rootReducer);
const reducer = combineReducers({
rootReducer,
routing: routerReducer,
});
export default function configureStore(initialState) {
const store = finalCreateStore(reducer, initialState);
return store;
}别的，上文提到的demoreact-router-redux-demo用了react-router和react-router-redux，固然也用到了redux的一些别的比较好的事变，比方redux-devtools，有兴致的朋侪能够点击这里
redux 与组件
这一部份报告的是一种组件誊写范例，并非一些库或许架构，这些范例有利于我们在庞杂的项目中构造页面，不至于杂沓。
从规划的角度看，redux强调了三种差别的规划组件，Layouts，Views，Components：
Layouts: 指的是页面规划组件，形貌了页面的基础构造，能够是无状况函数，平常就直接设置在最外层router的component参数中，并不负担和redux直接交互的功用。比方我项目中的Layouts组件：
const Frame = (props) =>
<div className="frame">
<div className="header">
<Nav />
</div>
<div className="container">
{props.children}
</div>
</div>;Views组件，我以为这个组件是Components的高阶组件或许Components group，这一层是能够和redux举行交互而且处置惩罚数据的，我们能够将一个团体性功用的组件组放在一个Views下面(注：因为我给出的demo异常简朴，因而Views层和Components层分的不是那末开)
Components组件，这是末级衬着组件，平常来讲，这一层级的组件的数据经由历程props传入，不直接和redux单向数据流发作交互，能够是木偶般的无状况组件，或许是包括本身少许交互和状况的组件，这一层级的组件能够被大批复用。
总而言之，恪守这套范例并非强制性的，然则项目一旦轻微庞杂一些，如许做的优点就能够充足彰显出来。
redux 与表单
redux的单向数据流相关于双向数据绑定，在处置惩罚表单等题目上确实有点力不从心，然则荣幸的是已开源了有几个比较不错的插件：
redux-form-utils，好吧，这个插件的star数量异常少，然则他比较简朴，源代码也比较短，只要200多行，所以这是一个值得我们看源码进修的插件(它的源码构造也异常简朴，就是先定一个一个高阶组件，这个高阶组件能够给我们本身定义的表单组件传入新的props，定制组件，后一部份就是定义了一些action和reducer，担任在内容变化的时刻关照转变状况树)，然则缺憾就是这个插件没有对表单考证做事变，所以假如我们须要表单考证，照样须要本身做一些事变的。
别的另有一处所，这个插件源代码写法顶用到了
::这类ES6的语法，这实际上是一种在es6中class内部，运用babel-preset-stage-0即可运用的语法糖：::this.[functionName] 等价于 this.[functionName].bind(this, args?)
redux-form，这个插件功用庞杂，代码完美，体量也异常巨大，能够参考文档举行运用，然则读懂源代码就是比较贫苦的事变了。不过这个插件须要在redux的运用的state下挂载一个节点，这个节点是不须要开发者本身来操控的，他唯一须要做的事变就是写一个submit函数即可。我在本身的demo中也把一个例子略加修改搬了过来，觉得用起来比较惬意。
redux 机能优化
想要做到redux机能优化，我们起首就要晓得redux的机能能够会在哪些处所受到影响，不然没有目的是没有办法机能优化的。
因为我也不是运用redux的熟手，所以也并不能掩盖一切机能优化的点，我总结两点：
有的时刻，我们须要的数据花样会自带冗余，能够抽掏出一些大众的部份从而缩减大小，比方我们须要的数据花样多是如许的：
[
{
name:"Nike",
title:"国度一级运动员","国度一级评判员"
}
{
name:"Jenny",
title:"国度一级评判员"
}
{
name:"Mark",
title:"国度一级运动员"
}
]这个时刻实际上我们能够优化成如许:
[
{
"国度一级运动员":"Nike","Mark"
"国度一级评判员":"Jenny","Nike"
}
]这个时刻，我们能够直接把后者看成store的花样，而我们用reselect这个库再转变成我们所要的花样，关于reselect怎样用上述链接有更细致的例子，在这里我就不过量引见了。
事实上，关于redux来讲，每当store发作转变的时刻，一切的connect都邑从新盘算，在一个大型运用中，糟蹋的时刻可想而知，为了削减机能糟蹋，我们能够对connect中的selector做缓存。
上文提到的reselect库自带了缓存特征，我们能够经由历程比较参数来肯定是不是运用缓存，这里用了纯函数的特征。
reselect的缓存函数能够用户自定义，详细能够参考上文github链接的readme。
