当前位置:首页 > vue.js > 正文

redux回顾

vue.js最近非常火爆,尤其是2.0发布之后,相应的vuex也开始需要重视起来了;
阮一峰老师的vuex的教程还是很清晰的;结合周末看的vue.js的入门和所有API,基本总结一下;
先最好是可以先参考下reactjs和对应的Redux的概念;比如redux的基本概念:是为了解决复杂的web应用而生;
(1)使用场景:
a. 用户的使用场景复杂;一个组件需要改变全局的状态;或者一个组件需要修改另外一个组件的状态;多组件交互;
b. 比如管理端,和用户身份有关;某个组件的状态需要共享,比如当前登录的用户的状态;或者某个状态可以在任何地方拿到;
c. 多用户之间的协作?类似web类同步操作系统?google doc?
d. 和服务器交互使用了websocket;或者含有大量的服务器交互;
e. view需要从不同的地方获取数据源;不过一般现在用node做接入层,可能会将多个node请求进行合并处理;

(2)设计思想:
a. Web 应用是一个状态机,视图与状态是一一对应的; 可以说视图随着状态的变化而随之修改变化;
b. 所有的状态,保存在一个对象里面。可以随时回溯(Store);

(3)基本概念:
a. Store:整个应用唯一的数据商店;统一进行存储;

b. State:相当于store的快照;

c. Action: 用户接触到的view发出的通知,就是action,表示state状态发生了变化;
其中Action必须要的属性:type;改变state的唯一方法,就是Action;

d. Action Create,方便创建Action的工具函数;

e. store.dispatch()
是view发出action的唯一方法

f. Reducer;
Store收到Action之后,必须给出一个新的State,否则View是无法更新的;State的计算过程就称为Reducer;

比如:

g. 纯函数:只要是相同的输入,必定是同一个输出;

(4)工作流程:
其实参考了flux的流程图:
flux%e5%8d%95%e9%a1%b9%e6%95%b0%e6%8d%ae%e6%b5%81%e5%8a%a8

Flux 的最大特点,就是数据的”单向流动”。

a. 用户访问 View
b. View 发出用户的 Action
c. Dispatcher 收到 Action,要求 Store 进行相应的更新
d. Store 更新后,发出一个”change”事件
e. View 收到”change”事件后,更新页面

上盗图:redux%e6%b5%81%e7%a8%8b%e5%9b%be

a. 首先是用户发出action;store.dispatch(action)
b. 然后,Store 自动调用 Reducer,并且传入两个参数:当前 State 和收到的 Action。 Reducer 会返回新的 State
let nextState = todoApp(previousState, action);
c. state 一旦有变化,Store 就会调用监听函数;
store.subscribe(listener);

以上就大概过了一遍redux的基本方面内容;

1 条评论

  1. 沙发2016-09-26 上午12:11
    jackqqxu

    目前国内中文的vuex文档还没发出来;
    先备份下:http://vuex.vuejs.org/en/intro.html
    有机会应该谈谈vuex;
    解释的是:
    Vuex是一个状态管理模式+类库,用来处理vue应用的;
    它作为一种中心化的store处理所有的组件;以特定的规则确保所有的state可以以一种
    可以预测的方式进行改变;

    Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.

发表评论

您必须 [ 登录 ] 才能发表留言!