1.为什么会出现redux
前端技术越来越强,开发者对于前端页面的体验要求也越来越高,大家开始琢磨着怎么才能提升页面的访问速度,于是单页面应用也随之而生。先简单吹一波单页面应用,因为redux主要是解决单页面应用的痛点,当然,不是单页面应用的话也可以使用(个人观点)
单页面应用最大的优点就是:
- 用户体验好、快,内容的改变不需要重新加载整个页面
- 页面可以减少很多的ajax资源请求,对服务器压力小。
当然,其缺点也显而易见:
- 你只有一个页面,SEO肯定难度大啊(这是纯天然劣势),不过知乎上看到一篇文章,关于spa的搜索引擎优化,<a href="http://zhanzhang.baidu.com/college/articleinfo?id=294" target="_blank">链接在此</a>
- 你只有一个页面,浏览器中的前进后退按钮肯定不能用,当然,这也有解决办法,利用URI中的散列+iframe实现,想知道的自行google。
- 初次加载耗时多,这个是真没办法完全解决,只能说尽量做优化,比如说一些不带导航的页面可以延迟加载(我自己yy的,感觉难度很大),或者说一些三方库,尽量用大公司的CDN。
所以说单页面应用肯定是趋势,但这跟redux有什么关系呢?单页面其实是有一些痛点的,官方的解释是:对于复杂的单页面应用,状态(state)管理非常重要。state 可能包括:服务端的响应数据、本地对响应数据的缓存、本地创建的数据(比如,表单数据)以及一些 UI 的状态信息(比如,路由、选中的 tab、是否显示下拉列表、页码控制等等)。如果 state 变化不可预测,就会难于调试(state 不易重现,很难复现一些 bug)和不易于扩展(比如,优化更新渲染、服务端渲染、路由切换时获取数据等等)。
说一个我曾经遇到的问题,当初做移动端spa的时候,移动端通常都有导航栏(就拿淘宝来说,有首页、购物车等等),我们使用react-router的时候,点击不同的导航栏会导致路由变化,但底部的导航高亮显示问题并不好处理,我们只能通过一个地方去存储,比如cookies, localstorage等等,不仅显得很low,而且太不安全;当然也可以通过截取url的方式,也太low,所以我们当时大胆的使用了flux来做状态管理,整个页面的数据状态是共享的,持久的。flux出来之后,解决了很多大型项目状态管理问题,而redux的出现,将 flux与函数式编程结合一起,很短时间内就让react成为了最热门的前端架构。
2.什么时候要使用redux
借用阮老师的一张图:
简单来说,没有遇到难题,就别用redux。在此啰嗦一句,阮老师有redux的文章,写的非常的通俗易懂,这是阮老师文章的特色,大吹一波。(图好像看的不太清楚。大家可以点击此处,直接看看阮老师的文章)
3.redux的使用
由于这次文档主要讲redux,所以中间自己做单页面应用demo的过程就不细说了,总之,效果如下图:
可以看到,这个demo是单页面应用,在我点击下面的按钮的时候(软件问题,看不到鼠标,但其实我是点击了的),页面的hash值是会改变的,页面的内容也会根据导航的改变而改变,但是,导航的点击并不会使导航高亮,也就是说没有activeStyle,所以我们引入redux来做导航底部样式的状态管理。
Redux 的设计思想很简单,就两句话:
- Web 应用是一个状态机,视图与状态是一一对应的。
- 所有的状态,保存在一个对象里面。
在组件化的应用中(比如react、vue2.0等),会有着大量的组件层级关系,深嵌套的组件与浅层父组件进行数据交互,变得十分繁琐困难。而redux,站在一个服务级别的角度,可以毫无阻碍地(这个得益于react的context机制,后面会讲解)将应用的状态传递到每一个层级的组件中。redux就相当于整个应用的管家。
redux有三大准则
- 单一数据源
整个应用状态,都应该被存储在单一store的对象树中。 - 只读状态
唯一可以修改状态的方式,就是发送(dispatch)一个动作(Action),通俗来讲,就是说只有getter,没有setter。 - 使用纯函数去修改状态
不知道什么是纯函数的看这篇文章先自行科普一下,纯函数保障了状态的稳定性,不会因不同环境导致应用程序出现不同情况,听说是redux真正的精髓,日后可以深入了解。
redux的几个概念
(1)Action
Action是唯一可以改变状态的途径,服务器的各种推送、用户自己做的一些操作,最终都会转换成一个个的Action,而且这些Action会按顺序执行,这种简单化的方法用起来非常的方便。Action 是一个对象。其中的type属性是必须的,表示 Action 的名称:
const action = {
type: 'home',
msg: 'Write Document'
};
(2)Store
Store管理着整个应用的状态,Store提供了一个方法dispatch
,这个就是用来发送一个动作,去修改Store里面的状态,然后可以通过getState
方法来重新获得最新的状态,也就是state。
(3)Reducer
当dispatch
之后,getState
的状态发生了改变,Reducer就是用来修改状态的。Reducer 是一个函数,它接受 Action 和当前 State 作为参数,返回一个新的 State。
const reducer = function (state, action) {
// ...
return new_state;
};
用一张图来形容三者的关系:
了解了redux的工作原理之后,接下来我们把redux应用到项目之中。
首先我们引入redux,得到createStore
方法,并创建store;创建store要求传入reducer
函数,所以我们必须先写reducer
函数。因为我们现在的需求主要是为了做底部导航栏的状态管理,所以state里面只要记录不同路由对应的底部导航栏是哪个,根据传入的Action_Type
不同,来返回不同的state,reducer
函数代码如下:
const defalutState = 'home';
export default (state = defalutState, action) => {
switch (action.type) {
case 'HOME':
return 'home';
case 'LIST' :
return 'list';
case 'SHOPCAR' :
return 'shopCar';
case 'MY' :
return 'my';
default:
return state;
}
}
底部导航栏的代码如下:
import React from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router'
import { createStore } from 'redux';
import reducer from '../redux/reducer.js';
const store = createStore(reducer);
import '../../css/page/footer.scss';
const changeState = (type) => {
store.dispatch({type});
};
class Footer extends React.Component {
constructor(props){
super(props);
this.state = {
};
}
render() {
const state = store.getState();
return (
<ul className="footer">
<li><Link className={state == 'home' ? 'active' : ''} to="/" onClick={changeState.bind(this, 'HOME')}>首页</Link></li>
<li><Link className={state == 'list' ? 'active' : ''} to="/list" onClick={changeState.bind(this, 'LIST')}>分类</Link></li>
<li><Link className={state == 'shopCar' ? 'active' : ''} to="/shopCar" onClick={changeState.bind(this, 'SHOPCAR')}>购物车</Link></li>
<li><Link className={state == 'my' ? 'active' : ''} to="/my" onClick={changeState.bind(this, 'MY')}>我的</Link></li>
</ul>
);
}
}
export default Footer;
加入redux之后,运行的效果如下:
看起来很完美,貌似没什么问题;但其实有坑,我旨在利用redux解决单页面路由问题,但是如果我们的网址是直接访问list页面的话,此时页面一进来,state的默认值是home,首页的导航高亮,很铭心与要求不符,所以,我们需要改造。我们把底部导航的点击去除,把store.dispatch
写在路由对应的js文件里面,在加载不同路由的时候调用该方法。
最后为了方便管理,我又把store、action、dispatch、reducer方法都提取出来。代码如下:
// action.js
export default (type, msg = type) => {
return {
type,
msg
}
}
// dispatch.js
import store from './store.js';
export default (obj) => {
store.dispatch(obj);
};
// reducer.js
const defalutState = 'home';
export default (state = defalutState, action) => {
switch (action.type) {
case 'HOME':
return 'home';
case 'LIST' :
return 'list';
case 'SHOPCAR' :
return 'shopCar';
case 'MY' :
return 'my';
default:
return state;
}
}
// store.js
import { createStore } from 'redux';
import reducer from '../redux/reducer.js';
export default createStore(reducer);
其实redux还有一些中间件
和异步操作
来足以维护大型项目,而且,为了方便使用,Redux 的作者封装了一个 React 专用的库 React-Redux
,要全部掌握redux还是需要一些时间的,本文档就不一一介绍了。