BREAK IN TO BREAK OUT Lyn
  1. 1 BREAK IN TO BREAK OUT Lyn
  2. 2 Life Will Change Lyn
  3. 3 かかってこいよ NakamuraEmi
  4. 4 Warcry mpi
  5. 5 Libertus Chen-U
  6. 6 Time Bomb Veela
  7. 7 Hypocrite Nush
  8. 8 Last Surprise Lyn
  9. 9 Flower Of Life 发热巫女
  10. 10 One Last You Jen Bird
2017-10-30 12:24:03

认识Redux架构

从前文中对Flux的介绍中我们知道了store, action creator,dispatcher间数据单向流动的简洁之处,也了解了其存在的一些不足,那么Redux作为Flux架构的优化版,其改进之处在哪里呢?


Redux的三大基本原则

Flux的基本原则是单向数据流,作为优化版的Redux同样也是如此,但在此基础上增加了3个基本原则。

唯一数据源

我们知道,在Flux中有各种各样的Store分别存储管理数据,这种情况下容易造成数据冗余,并且数据更新的不一致也会导致各种问题。虽然有waitFor方法保证更新顺序,但由此产生的依赖又增加了应用的复杂度。Redux只有唯一一个Store,它是一个树形的对象。

保持状态只读

这一点和Flux是一致的,同样不能直接修改state,必须通过派发一个action对象去修改。不同的是Flux中是限制了组件的store的setter,而Redux根本没有组件的store。取而代之的是根据当前派发的action对唯一Store进行迭代(reducer),迭代并不修改Store中的state,而是直接生成一个新的State。

状态修改只能通过纯函数完成

这里说的纯函数就是上文中指的reducer了,也是和Flux区别最大的地方。Flux中我们在actionCreator中调用dispatch方法去派发action,然后在组件Store中直接修改了数据。这样不仅有冗余代码,还无法保存数据变化前后的状态。

而Redux通过reducer这个纯函数去迭代,该函数接受state和action作为参数去生成一个新的state并且不产生任何副作用。这样不仅让state的修改变得简单纯粹,还可以保存修改前后的state,跟踪触发action前后的结果使得应用变得更易调试。


Redux数据流动解析

action

和Flux相同,redux同样需要两个文件去定义action,一个文件定义action的类型,这里和flux没有任何不同,但另一个action creator文件就不一样了。在Flux中action创建之后会立刻通过dispatcher派发出去,而redux中只会返回一个action对象,如何处理这个对象的工作交给调用者。

store

唯一Store由官方提供的createStore函数生成,这个函数接受reducer和initialState两个参数。我们已经知道了reducer函数需要根据先前的state和action去迭代产生新的state,而reducer第一次执行没有先前的state,这就是initialState参数的作用了。

和Flux中每个store中注册的逻辑处理回调函数一样,reducer函数中往往也包含以actionType为判断条件的switch语句,但区别在于reducer不会修改state,而是返回一个新的state将state存储的工作交给redux本身。reducer只专注于做一件事,就是基于旧的state迭代出新的state

view

在view组件中我们需要引入通过createStore函数创建的唯一Store。Store包含有几个核心方法就是用于view组件中。

getState

该方法用于获取store当前的状态,通常用于view组件初始化state。

subscribe

当然仅仅初始化state是不够的,我们还需要在state变化时同步view上的state。该方法用于监听state变化并同步,通常在ComponentDidMount()生命周期时调用,相对的componentWillUnmount()生命周期时调用unsubscribe()解绑。

dispatch

除了同步store中的state,我们也需要去改变store中的state。唯一方法就是通过该方法派发action了。


简单Redux实现

function createStore(reducer,initialState) {
    let state = initialState;
    let listeners = [];
    let dispatch = (action) => {
        state = reducer(state, action);
        listeners.forEach((item) => {
            item();
        });
    }
    let subscribe = (fn) => {
        listeners.push(fn);
        return () => {
            listeners = listeners.filter(item => item !== fn);
        }
    };
    let getState = () => state;
    return {
        getState,
        dispatch,
        subscribe
    }
}


小结

本文主要介绍了redux的基本运作原理及其相较于Flux的改进之处,但这只是个开始。react和redux的协作还有很多可以改进和增强的地方,在今后再一一介绍。

-- EOF --

添加在分类「 前端开发 」下,并被添加 「React」 标签。