详解JavaScript状态容器Redux
一、why redux
在说为什么用 redux 之前,让我们先聊聊组件通信有哪些方式。常见的组件通信方式有以下几种:
- 父子组件:props、state/callback回调来进行通信
- 单页面应用:路由传值
- 全局事件比如eventemitter监听回调传值
- react中跨层级组件数据传递context(上下文)
在小型、不太复杂的应用中,一般用以上几种组件通信方式基本就足够了。
但随着应用逐渐复杂,数据状态过多(比如服务端响应数据、浏览器缓存数据、ui状态值等)以及状态可能会经常发生变化的情况下,使用以上组件通信方式会很复杂、繁琐以及很难定位、调试相关问题。
因此状态管理框架(如 vuex、mobx、redux等)就显得十分必要了,而 redux 就是其中使用最广、生态最完善的。
二、redux data flow
在一个使用了 redux 的 app应用里面会遵循下面四步:
第一步:通过store.dispatch(action)来触发一个action,action就是一个描述将要发生什么的对象。如下:
{ type: 'like_article', articleid: 42 } { type: 'fetch_user_success', response: { id: 3, name: 'mary' } } { type: 'add_todo', text: '金融前端.' }
第二步:redux会调用你提供的 reducer函数。
第三步:根 reducer 会将多个不同的 reducer 函数合并到单独的状态树中。
第四步:redux store会保存从根 reducer 函数返回的完整状态树。
所谓一图胜千言,下面我们结合 redux 的数据流图来熟悉这一过程。
三、three principles(三大原则)
1、single source of truth:单一数据源,整个应用的state被存储在一个对象树中,并且只存在于唯一一个store中。
2、state is read-only:state里面的状态是只读的,不能直接去修改state,只能通过触发action来返回一个新的state。
3、changes are made with pure functions:要使用纯函数来修改state。
四、redux源码解析
redux 源码目前有js和ts版本,本文先介绍 js 版本的 redux 源码。redux 源码行数不多,所以对于想提高源码阅读能力的开发者来说,很值得前期来学习。
redux源码主要分为6个核心js文件和3个工具js文件,核心js文件分别为index.js、createstore.js、compose.js、combineruducers.js、bindactioncreators.js和applymiddleware.js文件。
接下来我们来一一学习。
4.1、index.js
index.js是入口文件,提供核心的api,如createstore、combinereducers、applymiddleware等。
export { createstore, combinereducers, bindactioncreators, applymiddleware, compose, __do_not_use__actiontypes }
4.2、createstore.js
createstore是 redux 提供的api,用来生成唯一的store。store提供getstate、dispatch、subscibe等方法,redux 中的store只能通过dispatch一个action,通过action来找对应的 reducer函数来改变。
export default function createstore(reducer, preloadedstate, enhancer) { ... }
从源码中可以知道,createstore接收三个参数:reducer、preloadedstate、enhancer。
reducer是action对应的一个可以修改store中state的纯函数。
preloadedstate代表之前state的初始化状态。
enhancer是中间件通过applymiddleware生成的一个加强函数。store中的getstate方法是获取当前应用中store中的状态树。
/** * reads the state tree managed by the store. * * @returns {any} the current state tree of your application. */ function getstate() { if (isdispatching) { throw new error( 'you may not call store.getstate() while the reducer is executing. ' + 'the reducer has already received the state as an argument. ' + 'pass it down from the top reducer instead of reading it from the store.' ) } return currentstate }
dispatch方法是用来分发一个action的,这是唯一的一种能触发状态发生改变的方法。subscribe是一个监听器,当一个action被dispatch的时候或者某个状态发生改变的时候会被调用。
4.3、combinereducers.js
/** * turns an object whose values are different reducer functions, into a single * reducer function. it will call every child reducer, and gather their results * into a single state object, whose keys correspond to the keys of the passed * reducer functions. */ export default function combinereducers(reducers) { const reducerkeys = object.keys(reducers) ... return function combination(state = {}, action) { ... let haschanged = false const nextstate = {} for (let i = 0; i < finalreducerkeys.length; i++) { const key = finalreducerkeys[i] const reducer = finalreducers[key] const previousstateforkey = state[key] const nextstateforkey = reducer(previousstateforkey, action) if (typeof nextstateforkey === 'undefined') { const errormessage = getundefinedstateerrormessage(key, action) throw new error(errormessage) } nextstate[key] = nextstateforkey //判断state是否发生改变 haschanged = haschanged || nextstateforkey !== previousstateforkey } //根据是否发生改变,来决定返回新的state还是老的state return haschanged ? nextstate : state } }
从源码可以知道,入参是 reducers,返回一个function。combinereducers就是将所有的 reducer合并成一个大的 reducer 函数。核心关键的地方就是每次 reducer 返回新的state的时候会和老的state进行对比,如果发生改变,则haschanged为true,触发页面更新。反之,则不做处理。
4.4、bindactioncreators.js
/** * turns an object whose values are action creators, into an object with the * same keys, but with every function wrapped into a `dispatch` call so they * may be invoked directly. this is just a convenience method, as you can call * `store.dispatch(myactioncreators.dosomething())` yourself just fine. */ function bindactioncreator(actioncreator, dispatch) { return function() { return dispatch(actioncreator.apply(this, arguments)) } } export default function bindactioncreators(actioncreators, dispatch) { if (typeof actioncreators === 'function') { return bindactioncreator(actioncreators, dispatch) } ... ... const keys = object.keys(actioncreators) const boundactioncreators = {} for (let i = 0; i < keys.length; i++) { const key = keys[i] const actioncreator = actioncreators[key] if (typeof actioncreator === 'function') { boundactioncreators[key] = bindactioncreator(actioncreator, dispatch) } } return boundactioncreators }
bindactioncreator是将单个actioncreator绑定到dispatch上,bindactioncreators就是将多个actioncreators绑定到dispatch上。
bindactioncreator就是将发送actions的过程简化,当调用这个返回的函数时就自动调用dispatch,发送对应的action。
bindactioncreators根据不同类型的actioncreators做不同的处理,actioncreators是函数就返回函数,是对象就返回一个对象。主要是将actions转化为dispatch(action)格式,方便进行actions的分离,并且使代码更加简洁。
4.5、compose.js
/** * composes single-argument functions from right to left. the rightmost * function can take multiple arguments as it provides the signature for * the resulting composite function. * * @param {...function} funcs the functions to compose. * @returns {function} a function obtained by composing the argument functions * from right to left. for example, compose(f, g, h) is identical to doing * (...args) => f(g(h(...args))). */ export default function compose(...funcs) { if (funcs.length === 0) { return arg => arg } if (funcs.length === 1) { return funcs[0] } return funcs.reduce((a, b) => (...args) => a(b(...args))) }
compose是函数式变成里面非常重要的一个概念,在介绍compose之前,先来认识下什么是 reduce?官方文档这么定义reduce:reduce()方法对累加器和数组中的每个元素(从左到右)应用到一个函数,简化为某个值。compose是柯里化函数,借助于reduce来实现,将多个函数合并到一个函数返回,主要是在middleware中被使用。
4.6、applymiddleware.js
/** * creates a store enhancer that applies middleware to the dispatch method * of the redux store. this is handy for a variety of tasks, such as expressing * asynchronous actions in a concise manner, or logging every action payload. */ export default function applymiddleware(...middlewares) { return createstore => (...args) => { const store = createstore(...args) ... ... return { ...store, dispatch } } }
applymiddleware.js文件提供了middleware中间件重要的api,middleware中间件主要用来对store.dispatch进行重写,来完善和扩展dispatch功能。
那为什么需要中间件呢?
首先得从reducer说起,之前 redux三大原则里面提到了reducer必须是纯函数,下面给出纯函数的定义:
- 对于同一参数,返回同一结果
- 结果完全取决于传入的参数
- 不产生任何副作用
至于为什么reducer必须是纯函数,可以从以下几点说起?
- 因为 redux 是一个可预测的状态管理器,纯函数更便于 redux进行调试,能更方便的跟踪定位到问题,提高开发效率。
- redux 只通过比较新旧对象的地址来比较两个对象是否相同,也就是通过浅比较。如果在 reducer 内部直接修改旧的state的属性值,新旧两个对象都指向同一个对象,如果还是通过浅比较,则会导致 redux 认为没有发生改变。但要是通过深比较,会十分耗费性能。最佳的办法是 redux返回一个新对象,新旧对象通过浅比较,这也是 reducer是纯函数的重要原因。
reducer是纯函数,但是在应用中还是会需要处理记录日志/异常、以及异步处理等操作,那该如何解决这些问题呢?
这个问题的答案就是中间件。可以通过中间件增强dispatch的功能,示例(记录日志和异常)如下:
const store = createstore(reducer); const next = store.dispatch; // 重写store.dispatch store.dispatch = (action) => { try { console.log('action:', action); console.log('current state:', store.getstate()); next(action); console.log('next state', store.getstate()); } catch (error){ console.error('msg:', error); } }
五、从零开始实现一个简单的redux
既然是要从零开始实现一个redux(简易计数器),那么在此之前我们先忘记之前提到的store、reducer、dispatch等各种概念,只需牢记redux是一个状态管理器。
首先我们来看下面的代码:
let state = { count : 1 } //修改之前 console.log (state.count); //修改count的值为2 state.count = 2; //修改之后 console.log (state.count);
我们定义了一个有count字段的state对象,同时能输出修改之前和修改之后的count值。但此时我们会发现一个问题?就是其它如果引用了count的地方是不知道count已经发生修改的,因此我们需要通过订阅-发布模式来监听,并通知到其它引用到count的地方。因此我们进一步优化代码如下:
let state = { count: 1 }; //订阅 function subscribe (listener) { listeners.push(listener); } function changestate(count) { state.count = count; for (let i = 0; i < listeners.length; i++) { const listener = listeners[i]; listener();//监听 } }
此时我们对count进行修改,所有的listeners都会收到通知,并且能做出相应的处理。但是目前还会存在其它问题?比如说目前state只含有一个count字段,如果要是有多个字段是否处理方式一致。同时还需要考虑到公共代码需要进一步封装,接下来我们再进一步优化:
const createstore = function (initstate) { let state = initstate; //订阅 function subscribe (listener) { listeners.push(listener); } function changestate (count) { state.count = count; for (let i = 0; i < listeners.length; i++) { const listener = listeners[i]; listener();//通知 } } function getstate () { return state; } return { subscribe, changestate, getstate } }
我们可以从代码看出,最终我们提供了三个api,是不是与之前redux源码中的核心入口文件index.js比较类似。但是到这里还没有实现redux,我们需要支持添加多个字段到state里面,并且要实现redux计数器。
let initstate = { counter: { count : 0 }, info: { name: '', description: '' } } let store = createstore(initstate); //输出count store.subscribe(()=>{ let state = store.getstate(); console.log(state.counter.count); }); //输出info store.subscribe(()=>{ let state = store.getstate(); console.log(`${state.info.name}:${state.info.description}`); });
通过测试,我们发现目前已经支持了state里面存多个属性字段,接下来我们把之前changestate改造一下,让它能支持自增和自减。
//自增 store.changestate({ count: store.getstate().count + 1 }); //自减 store.changestate({ count: store.getstate().count - 1 }); //随便改成什么 store.changestate({ count: 金融 });
我们发现可以通过changestate自增、自减或者随便改,但这其实不是我们所需要的。我们需要对修改count做约束,因为我们在实现一个计数器,肯定是只希望能进行加减操作的。所以我们接下来对changestate做约束,约定一个plan方法,根据type来做不同的处理。
function plan (state, action) => { switch (action.type) { case 'increment': return { ...state, count: state.count + 1 } case 'decrement': return { ...state, count: state.count - 1 } default: return state } } let store = createstore(plan, initstate); //自增 store.changestate({ type: 'increment' }); //自减 store.changestate({ type: 'decrement' });
我们在代码中已经对不同type做了不同处理,这个时候我们发现再也不能随便对state中的count进行修改了,我们已经成功对changestate做了约束。我们把plan方法做为createstore的入参,在修改state的时候按照plan方法来执行。到这里,恭喜大家,我们已经用redux实现了一个简单计数器了。
这就实现了 redux?这怎么和源码不一样啊
然后我们再把plan换成reducer,把changestate换成dispatch就会发现,这就是redux源码所实现的基础功能,现在再回过头看redux的数据流图是不是更加清晰了。
六、redux devtools
redux devtools是redux的调试工具,可以在chrome上安装对应的插件。对于接入了redux的应用,通过 redux devtools可以很方便看到每次请求之后所发生的改变,方便开发同学知道每次操作后的前因后果,大大提升开发调试效率。
如上图所示就是 redux devtools的可视化界面,左边操作界面就是当前页面渲染过程中执行的action,右侧操作界面是state存储的数据,从state切换到action面板,可以查看action对应的 reducer参数。切换到diff面板,可以查看前后两次操作发生变化的属性值。
七、总结
redux 是一款优秀的状态管理器,源码短小精悍,社区生态也十分成熟。如常用的react-redux、dva都是对 redux 的封装,目前在大型应用中被广泛使用。这里推荐通过redux官网以及来学习它核心的思想,进而提升阅读源码的能力。
以上就是详解javascript状态容器redux的详细内容,更多关于javascript状态容器redux的资料请关注其它相关文章!
上一篇: 赛车8配置 赛车8最低配置及要求
下一篇: 夜班配置 夜班最低配置及要求