redux是什么?
redux
是一个用于管理js应用状态的容器。redux
出现时间并不是很长,在它出现之前也有类似功能的模块出现,诸如flux
等等。redux
设计的理念很简单,似乎最初这个开发团队就有让redux
可以方便融入在server, browser, mobile client端的打算。目前在github上redux-*
的第三方中间件、插件越来越多。如果react项目中想使用redux
,那么就有react-redux
插件来完成配合。而作为开发者,可以使用这些优秀的第三方资源来开发/优化已有的项目,也是一件很欢乐的事。
设计的动机
在redux.js.org里有关于编写redux的动机描述(our code must manage more state than ever before
),在现实的生活中,单页应用越来越多,而且需要维护的状态也越来越复杂,诸如维护数据更新、UI更新、本地数据存储等这些都是我们在js应用常常需要处理的情景,当然这里多数都会涉及到异步处理。而redux
本身就是为了解决这些问题,而是将所有的变化进行统一流程处理,会使我们的程序状态变化清晰可见。redux最终目的就是让状态(state)变化变得可预测。
使用的三原则
- 1, Single source of truth
单一数据源。整个应用的state,存储在唯一一个object中,同时也只有一个store用于存储这个object. - 2, State is read-only
状态是只读的。唯一能改变state的方法,就是触发action操作。action是用来描述正在发生的事件的一个对象。 - ** 3, Changes are made with pure functions**
在改变state tree时,用到action,同时也需要编写对应的reducers才能完成state改变操作。
在上面的三原则中,我们看到了store
, action
, reducer
这些词,那就先说说redux
是怎么进行应用状态(state)维护管理的呢。
redux状态管理的流程
- action是用户触发或程序触发的一个普通对象。
- reducer是根据action操作来做出不同的数据响应,返回一个新的state。
-
store的最终值就是由reducer的值来确定的。(一个store是一个对象, reducer会改变store中的某些值)
redux流程.png
上图简单画了下redux状态改变的流程。action
-> reducer
-> 新store
-> 反馈到UI上有所改变
。
下面再给个具体实例:
![](http://upload-images.jianshu.io/upload_images/1400529-2d18bf3823145995.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
store用于维护状态的容器,包括了应用的多个状态,比如说用户是否登录、用户信息、用户任务等等。action是一个普通对象,用于指明是哪种操作,这样才能在reducers中进行识别。而众多reducer是负责返回新的state的函数。在实际应用中,你需要将store或store的某个值绑定到界面,这样更新store的时候,该页面可以监听到值的更新,然后进行一些页面更新操作/跳转操作等。
redux在实际使用中需要用到的高级部分
redux设计如此简洁,以至于并没有进行异步处理的功能。但是留下了middleware这个概念。可以自己编写符合需要的中间件。目前第三方的中间件基本可以完成一个复杂应用的架构设计。那就先说一说,怎么去处理异步请求呢。
首先推荐redux-thunk
,可以看到它的源码很简洁。就是判断action是否是函数,如果是函数进行递归式的操作。所以在redux
中的异步,只能出现在action中,而且还需要有中间件的支持。
export default function thunkMiddleware({ dispatch, getState }) { return next => action => { if (typeof action === 'function') { return action(dispatch, getState); } return next(action); }; } // redux-thunk的源码
同步action与异步action最大的区别是:
同步只返回一个普通action对象。而异步操作中途会返回一个promise函数。当然在promise函数处理完毕后也会返回一个普通action对象。thunk
中间件就是判断如果返回的是函数,则不传导给reducer,直到检测到是普通action对象,才交由reducer处理。
实例说说redux的使用。
实例代码在github上查看地址。该实例只演示了登录过程,是比较基础的redux使用案例。
![](http://upload-images.jianshu.io/upload_images/1400529-4b8fc67ebe1d8053.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/200)
项目相关代码均在js
目录下。目录中可以看到actions
, reducers
, store
等子目录。
实例action
![](http://upload-images.jianshu.io/upload_images/1400529-6926060cc7f0e3c4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
actions/user.js
目录中定义了用户登录操作的action creator
:
- 第22行的
logIn
logIn
是一个异步action,注意函数内部的写法与redux-thunk
的定义要相同。 - 第38行的
skipLogin
- 第47行
logOut
这些creator,产生的action状态有LOGGED_DOING
,LOGGED_IN
,LOGGED_ERROR
,LOGGED_OUT
四种状态。
第8行变量testUser
, 第15行变量skipUser
分别是模拟针对普通登录成功后(这里用的是fetch www.baidu.com,真实情况下需换成真实的登录接口)的用户对象,跳过登录后默认的用户对象。
接下来再看看reducers
怎么去处理这些action?
实例reducer
![](http://upload-images.jianshu.io/upload_images/1400529-cf6c4f456339869b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/593)
reducers/user.js
中:
- 第5行的
initialState
定义了最开始的应用状态(即用户未登录的情况下的state)。 - 第13行,对每个传过来的
action
进行switch
,每个action都需要返回一个state对象,如果不需要变动,则返回原对象(switch中的default返回值)。需要变动,则返回一个新的state, 可以看到当type为LOGGED_DOING
,LOGGED_IN
,LOGGED_OUT
时,返回的对象跟原始对象都会有一些字段的差别。
![](http://upload-images.jianshu.io/upload_images/1400529-d26e08d3b6b7a57a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/428)
reducers/index.js
中:
- 第5行
combineReducers
是将应用的state进行组合。 - 目前demo中只有用户信息,所以只看到第6行
userStore
这一个key,在一个业务复杂的应用里,需要保存很多应用和用户交互产生的信息(比如说用户聊天列表等信息)。
实例store
再来看看store
的处理:
![](http://upload-images.jianshu.io/upload_images/1400529-124a75c305ed09c7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
store/index.js
中定义了store的行为(包括中间件):
- 第23行的
applyMiddleware
会将中间件应用在redux action过程中。 - 第10行自定义一个
logger
中间件,该中间件的目的是打印出当前的触发的action
以及出发后的state
变化。 - 第27行,33行 使用了
redux-persist
这个第三方插件来将store对象存储到本地,以及从本地恢复数据到store中,比如说保存登录信息,下次打开应用可以直接跳过登录界面。
程序入口
上面是定义。下面再来看如何在程序中使用:
![](http://upload-images.jianshu.io/upload_images/1400529-d5ebdd7c976fdc2f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
在入口文件
index.js
中:
- 第27行,需要将
store
作为属性传递给Provider
组件中。 - 第28行,可以看到的是真正渲染出的东西是
<Root/>
标签返回的东西。
那就来看看root.js
里的内容。
![](http://upload-images.jianshu.io/upload_images/1400529-9e1e957b6ee84d63.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/690)
root.js
中:
- 第48行的
render
主要实现了Navigator
导航器的处理,并用自定义的一个Router
(第27行)进行封装了下。 - 第59行,在末尾的
select
函数,是将store
中的某些值复制到当前组件的props中,注意这里需要用connect
函数进行绑定,否则store
变化,不会反馈到Root
组件中。isLoggedIn
这个变量便被复制到当前的Root组件中,在Root内部方法中可以访问。 - 第16行,
constructor
里,会对登录状态进行判断,如果检测到已经登录了,则会修改Navigator
初始的路由设置(第10行设置的),使应用直接显示MainPage
。
登录页面。
那再看看登录页面pages/login.js
中的用户操作:
![](http://upload-images.jianshu.io/upload_images/1400529-3abfa91f862465ee.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
![](http://upload-images.jianshu.io/upload_images/1400529-62a6550fafa25e96.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
![](http://upload-images.jianshu.io/upload_images/1400529-e9ae8251a3cb4a27.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
上面的3个图片是整个pages/login.js
的源码。
- 第160行,指定了该组件会与
store
的哪些值进行连接。分别是isLoggedIn
,user
,status
。 - 第129行,定义了
Text
的onPress
操作。handleLogin
是绑定的操作方法,方法内容见第60行。在71行时,会触发logIn
这个action。 - 触发
logIn
后,会先进入LOGGED_DOING
状态,此时说明在登录中。在第42行,有对该状态进行监听,如果为该状态,会将弹窗弹出,提醒为loading态。 - 第33行,在
shouldComponentUpdate
中,对即将变化的nextProps进行与目前的props进行对比。比如说logIn
执行登录完成后,第35行检测到isLoggedIn
为true,则执行toMain
函数(即跳转到主页中)。
看下最终的demo交互效果。
![](http://upload-images.jianshu.io/upload_images/1400529-0ce768e5c39a9d77.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/480)
作者:巨巨
链接:https://www.jianshu.com/p/2c43860b0532
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
引用原文:https://www.jianshu.com/p/2c43860b0532
写博客是为了记住自己容易忘记的东西,另外也是对自己工作的总结,文章可以转载,无需版权。希望尽自己的努力,做到更好,大家一起努力进步!
如果有什么问题,欢迎大家一起探讨,代码如有问题,欢迎各位大神指正!