redux 订阅
Redux由Dan Abramov在2015年创建的科技术语。是受2014年Facebook的Flux架构以及函数式编程语言Elm启发。很快,Redux因其简单易学体积小在短时间内成为最热门的前端架构。 展开全文
Redux由Dan Abramov在2015年创建的科技术语。是受2014年Facebook的Flux架构以及函数式编程语言Elm启发。很快,Redux因其简单易学体积小在短时间内成为最热门的前端架构。
信息
创建时间
2015年
发布人
Dan Abramov
属    性
前端架构
外文名
Redux
redux简介
Redux对于JavaScript应用而言是一个可预测状态的容器。换言之,它是一个应用数据流框架,而不是传统的像underscore.js或者AngularJs那样的库或者框架。Redux最主要是用作应用状态的管理。简言之,Redux用一个单独的常量状态树(对象)保存这一整个应用的状态,这个对象不能直接被改变。当一些数据变化了,一个新的对象就会被创建(使用actions和reducers)。
收起全文
精华内容
参与话题
问答
  • redux

    2019-08-14 14:38:27
    Redux 本身很简单。 当使用普通对象来描述应用的 state 时。例如,todo 应用的 state 可能长这样: { todos: [{ text: ‘Eat food’, completed: true }, { text: ‘Exercise’, completed: false }], ...

    Redux 本身很简单。

    当使用普通对象来描述应用的 state 时。例如,todo 应用的 state 可能长这样:

    {
    todos: [{
    text: ‘Eat food’,
    completed: true
    }, {
    text: ‘Exercise’,
    completed: false
    }],
    visibilityFilter: ‘SHOW_COMPLETED’
    }
    这个对象就像 “Model”,区别是它并没有 setter(修改器方法)。因此其它的代码不能随意修改它,造成难以复现的 bug。

    要想更新 state 中的数据,你需要发起一个 action。Action 就是一个普通 JavaScript 对象(注意到没,这儿没有任何魔法?)用来描述发生了什么。下面是一些 action 的示例:

    { type: ‘ADD_TODO’, text: ‘Go to swimming pool’ }
    { type: ‘TOGGLE_TODO’, index: 1 }
    { type: ‘SET_VISIBILITY_FILTER’, filter: ‘SHOW_ALL’ }
    强制使用 action 来描述所有变化带来的好处是可以清晰地知道应用中到底发生了什么。如果一些东西改变了,就可以知道为什么变。action 就像是描述发生了什么的指示器。最终,为了把 action 和 state 串起来,开发一些函数,这就是 reducer。再次地,没有任何魔法,reducer 只是一个接收 state 和 action,并返回新的 state 的函数。 对于大的应用来说,不大可能仅仅只写一个这样的函数,所以我们编写很多小函数来分别管理 state 的一部分:

    function visibilityFilter(state = ‘SHOW_ALL’, action) {
    if (action.type === ‘SET_VISIBILITY_FILTER’) {
    return action.filter;
    } else {
    return state;
    }
    }

    function todos(state = [], action) {
    switch (action.type) {
    case ‘ADD_TODO’:
    return state.concat([{ text: action.text, completed: false }]);
    case ‘TOGGLE_TODO’:
    return state.map((todo, index) =>
    action.index === index ?
    { text: todo.text, completed: !todo.completed } :
    todo
    )
    default:
    return state;
    }
    }
    再开发一个 reducer 调用这两个 reducer,进而来管理整个应用的 state:

    function todoApp(state = {}, action) {
    return {
    todos: todos(state.todos, action),
    visibilityFilter: visibilityFilter(state.visibilityFilter, action)
    };
    }
    这差不多就是 Redux 思想的全部。注意到没我们还没有使用任何 Redux 的 API。Redux 里有一些工具来简化这种模式,但是主要的想法是如何根据这些 action 对象来更新 state,而且 90% 的代码都是纯 JavaScript,没用 Redux、Redux API 和其它魔法

    版权声明:本文为CSDN博主「马新杰」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/WebMxj/article/details/98964460

    展开全文
  • Redux

    2020-09-26 17:10:34
    为了高效对数据进行处理,我们引入Redux对数据进行统一管理。 将所有数据都保存在一个store中进行处理。 使用Redux时也需要一点优化。 比如使用 actionCreator 统一创建 action ActionTypes 的拆分。 具体...

    React中的数据传递十分复杂低效。为了高效对数据进行处理,我们引入Redux对数据进行统一管理。

    将所有数据都保存在一个store中进行处理。

     使用Redux时也需要一点优化。

    比如使用 actionCreator 统一创建 action

    ActionTypes 的拆分

    具体参考Github练习项目React-Redux.git

     

    展开全文

空空如也

1 2 3 4 5 ... 20
收藏数 25,590
精华内容 10,236
关键字:

redux