美文网首页
Flux与Redux

Flux与Redux

作者: LOVE小狼 | 来源:发表于2016-12-22 11:17 被阅读128次

一. Flux

1. 概念

flux是一套前端应用架构模式,核心是单向数据流

注:flux不是具体的代码实现

2. 解决了什么问题

组件内部state过于复杂时会使得组件本身臃肿难以维护,因此需要将state与事件部分抽取出来,组件本身只负责获取数据与渲染,其他的逻辑通过分类从component中剥离出去,这样可以保证数据流更清晰。

3. 分类分离的内容

组件中只负责渲染之后,组件状态与行为如何分类呢

  • store:保存状态与行为,通过对store的监听可以实现store中数据变化时实时渲染组件。
  • action:保存行为描述与行为所需数据,本事就是一个js对象,如下所示
    { type:'delete',id:'1' }
  • dispatcher
      有了store中的行为和数据,有了action的行为描述,组件如何触发行为从而改变state呢?这就需要dispatcher做中转,它的存在保证了单向MVC的实现。
      dispatcher提供两种方法,register与dispatch
      register接收回调函数作为参数,函数内使用switch...case方式先设定好特定actiontype对应的store中的行为函数(也可能会加一些额外逻辑)
      dispatch接收参数为action,当接收以后action会传递给register的回调函数,在函数内部处理action中的数据。

二. Redux

redux是flux架构的具体代码实现

1. 解决问题

通过对数据流的限制来保证state的变化可预测

注:所谓可预测就是指数据的走向清晰,就像拓扑图一样使数据沿着预定的顺序行走,这就是单项数据流的好处

2. 如何限制数据流

通过redux三大定律

  • 单一数据源:整个应用的state存储在一个js对象中

保证的数据流的终点固定。

  • state为只读:所谓只读就是只能取数据,不能直接在state改数据,如果想要修改state当且仅当触发action(dispatch一个action)才可修改

保证了数据流的起点

  • 使用纯函数执行修改
    使用reducer规定如何修改state,reducer本身是一个纯函数,接收state与action作为参数,纯函数好处在于输入确定,输出也会确定
    //这就是一个reducer函数,负责处理action,返回新的state
    function reducerDemo(state,action){
    switch (action.type) {
    .....
    注:函数内部不可直接修改state,可通过拷贝方式返回新的state
    }
    }

保证了修改过程中数据流输出可预测

3.redux组成

  1. action
    action就是一个js对象,保存actiontype与data(行为所需数据),为保证data的复用性一般使用action creator(以data为参数的函数)生成action
  2. reducer
    reducer是一个纯函数,定义了state如何被修改
    const initialState = ''; //拆分的state
    function reducer1 (state = initialState,action) { //拆分的reducer
    switch (action.type) {
    ....
    }
    }
    考虑到当应用复杂的情况下reducer与state会变得非常臃肿,redux采取了先拆分后合并的方式来处理state与reducer
    import { combineReducers } from 'redux';
    import reducer1 from './xxx';
    import reducer2 from './xxx';
    const rootReducer = combineReducers({
    reducer1,
    reducer2
    });
    这样combineReducers会将拆分的state与reducer
  3. store
    redux中提供了createStore函数,它以rootReducer为参数返回store
    const store = createStore(rootReducer);

相关文章

  • 2021-04-14 redux

    Redux 将flux与函数式编程结合在一起, 对于flux的系统架构的实现 Redux使用场景- 简单来说, 如...

  • 03|从Flux到Redux

    单向数据流始祖 Flux Flux理念的一个更强实现Redux 结合React和Redux 01|Flux 从Fl...

  • Redux - lewisbook

    Redux = Reducer + Flux 1、Redux的工作流程(Redux Flow) redux-flo...

  • Redux

    Redux = Reducer + Flux Redux示例 ./store/index.js ./redux/t...

  • Flux与Redux

    一. Flux 1. 概念 flux是一套前端应用架构模式,核心是单向数据流 注:flux不是具体的代码实现 2....

  • 深入浅出React和Redux学习笔记(三)

    从Flux到Redux Redux管理应用状态的框架: 单向数据流的始祖Flux; Flux理念的一个更强实现Re...

  • Redux

    Redux 简介 Redux = Reducer + Flux Redux 的工作流程 使用antd编写Todo...

  • 从Flux到Redux

    单向数据流框架的始祖FluxFlux理念的一个更强实现Redux结合React和Redux 认识Flux flux...

  • redux之理解与使用

    1 redux认识Redux 由 Flux 演变而来,但受 Elm的启发,避开了 Flux 的复杂性。 不管你有没...

  • [译]图解Redux - A cartoon Intro to

    Redux是受Flux启发的一种模式,导致大家对Flux感觉非常迷惑的一件事是Flux和Redux的区别。这篇文章...

网友评论

      本文标题:Flux与Redux

      本文链接:https://www.haomeiwen.com/subject/lumcvttx.html