Redux学习与使用总结-基础篇
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