标签 React 下的文章

谈谈 React 和 Redux

刚回到家的时候学习了 React 和 Redux,现在才想来总结一下,不知道会不会忘的差不多了...本来是想写一个问卷发布系统的,使用 React 和 Redux 已经完成了基础的几个功能,但是那个代码量...用 Angular 写简直轻轻松松的好吧...然后就去重构项目还有现在学的 Underscore 去了。是时候重新回顾下了。
此处主要讲的是 Redux 。

关于 Redux

redux 是facebook 提出的 flux 架构的一种优秀实现;而且不局限于为 react 提供数据状态处理。它是零依赖的,可以配合其他任何框架或者类库一起使用。要想配合 react,还得引入 react-redux。

关于 Flux

那什么是 Flux 呢?见下图
flux-overview.png
Flux 可以分为四个部分:

  • View: 视图层
  • Action: 视图层触发的动作
  • Dispatcher: 派发器,用来接受 Actions, 执行回调函数
  • Store:数据层,用来存放应用的状态,其变更会触发 View 层更新

Flux 的最大特点就是单向流动,他的过程大概如下:

  1. 用户访问 View ,触发了动作 Action
  2. Dispatcher 收到 Action ,根据 Action 类别进行相应的处理,处理结束后要求 Store 更新
  3. Store 进行更新,通知 View 层刷新
  4. View 层收到通知更新页面

额,其实我没有用 Flux,不敢讲太多了,简单的说就是一种单项数据流动的解决方案吧。我是直接学 Redux,对 Flux 也就大概了解这么多了。

Redux 和 Flux

Redux 是 Flux 的一种实现,但他们又有所不同,在 Flux 中,Store 可以有多个,但 Redux 有且只能有一个 Store,Flux 中存在 Dispatcher,在 Redux 则没有这个,而是用 reducer 代替了。 Flux 了=.=

理解Redux

Redux 由四部分组成:

  • Action
  • Reducer
  • Store
  • Views

我们结合具体的应用场景来看

Action

先从 Action 说起,一个 Action 是一个普通的对象。

export const SET_PAPER_TITLE = 'SET_PAPER_TITLE';
export const ADD_QUESTION = 'ADD_QUESTION';
export const REMOVE_QUESTION = 'REMOVE_QUESTION';
export function setPaperTitle(newTitle) {
    return {
        type: SET_PAPER_TITLE,
        value: newTitle
    }
}
export function addQuestion(type) {
    return {
        type: ADD_QUESTION,
        questionType: type
    }
}
export function removeQuestion(questionId) {
    return {
        type: REMOVE_QUESTION,
        questionId: questionId
    }
}

type 属性是必须的,表示动作类别,其他的参数可以自定。
我们先不用管 Action 有什么用,后面会提到。

- 阅读剩余部分 -

This page loaded in 0.001268 seconds