Redux学习与使用总结-基础篇

2017-10-24  本文已影响0人  tonytong

参考阮老师的文章

测试项目地址

Redux解决了哪些问题?什么时候使用它?

React 只是 DOM 的一个抽象层,并不是 Web 应用的完整解决方案。有两个方面,它没涉及:1.代码结构;2.组件之间的通信。

对于大型的复杂应用来说,这两方面恰恰是最关键的。因此,只用 React 没法写大型应用。

为了解决这个问题,2014年 Facebook 提出了Flux架构的概念,引发了很多的实现。2015年,Redux出现,将 Flux 与函数式编程结合一起,很短时间内就成为了最热门的前端架构。

简单说,如果你的UI层非常简单,没有很多互动,Redux 就是不必要的,用了反而增加复杂性。情况如下:

1.用户的使用方式非常简单

2.用户之间没有协作

3.不需要与服务器大量交互,也没有使用 WebSocket

4.视图层(View)只从单一来源获取数据

一般运用数据、界面交互都很复杂的,所以,个人觉得能用就还是用吧,除非你只是写个demo。

设计思想

(1)Web 应用是一个状态机,视图与状态是一一对应的。

(2)所有的状态,保存在一个对象里面。

基础篇代码

一、store的概念

createStore是store生成器,store相当于整运用的数据容器,

你可以把它看成一个json数据表,其反应了整个运用的可变状态信息,

当每有一个节点发生变化都会使界面发生变化;

const store = createStore(func) fun为reducer函数即纯函数->同样的输入对应同样的输出。

二、state的概念

store是存储state的容器,state的获取方式如下

const state = store.getState()

Redux规定,一个state对应一个View。只要state相同,View就相同。你知道 State,就知道 View 是什么样,反之亦然。

三、action的概览

State 的变化,会导致 View 的变化。但是,用户接触不到 State,只能接触到 View。所以,State 的变化必须是 View 导致的。Action 就是 View 发出的通知,表示 State 应该要发生变化了。

Action 是一个对象。其中的type属性是必须的,表示 Action 的名称。其他属性可以自由设置,社区有一个规范可以参考。

例如:

const action = {

type: 'ADD_TODO',

payload: 'Learn Redux'

};

reducer 案例:

State -> 是一个对象

function reducer(state, action) {

return Object.assign({}, state, { thingToChange });

// 或者

return { ...state, ...newState };

}

State -> 是一个数组

function reducer(state, action) {

return [...state, newItem];

}

Store 允许使用store.subscribe方法设置监听函数,一旦 State 发生变化,就自动执行这个函数。

import { createStore } from 'redux';

const store = createStore(reducer);

store.subscribe(listener);

显然,只要把 View 的更新函数(对于 React 项目,就是组件的render方法或setState方法)放入listen,就会实现 View 的自动渲染。

store.subscribe方法返回一个函数,调用这个函数就可以解除监听。

let unsubscribe = store.subscribe(() =>

console.log(store.getState())

);

unsubscribe();

四、可以发现 Store 提供了三个方法:

1.store.getState()

2.store.dispatch()

3.store.subscribe()

createStore方法还可以接受第二个参数,表示 State 的最初状态。这通常是服务器给出的

let store = createStore(todoApp, window.STATE_FROM_SERVER)

五、Reducer 的拆分

将reducer函数粒度化,通过combineReducers函数合并构建成强大功能的reducer

上一篇下一篇

猜你喜欢

热点阅读