了解redux
什么是redux
Redux是一个流行的JavaScript框架,为应用程序提供一个可预测的状态容器。Redux基于简化版本的Flux框架,Flux是Facebook开发的一个框架。在标准的MVC框架中,数据可以在UI组件和存储之间双向流动,而Redux严格限制了数据只能在一个方向上流动。
使用redux的目的
在react中组件与组件之间的通信很麻烦,于是借用redux进行第三方的通信,通过把数据存储在store里,实现各个组件间快速通信
redux基础
- 核心
state:普通对象 action:JS 普通对象,用来描述发生了什么,store 数据的唯一来源 reducer:把 action 和
state 串起来。接收 state 和 action 作为参数,并返回新的 state 的函数。
- 三大原则
单一数据源:只存在唯一一个store state只读:唯一改变 state 的方法就是触发 action 使用纯函数进行修改:reducer
- 主要组件
- action
我们知道State的变化会导致View的变化,但是用户接触不到State,只能接触到view。
Action就是从View发出通知,State接受并表示变化。
Action是一个对象,其中的 type 属性是必须的,表示Action的名称。
const action = {
type: 'ADD',
}
- reducer
描述如何响应action更新state
- store
Store就是保存数据的地方,可以理解成一个容器。整个应用只能有一个store。
维持应用的 state; 提供 getState() 方法获取 state; 提供 dispatch(action) 方法更新 state;
通过 subscribe(listener) 注册监听器; 通过 subscribe(listener) 返回的函数注销监听器。
- store.dispatch():
store.dispatch()是View发出Action的唯一方法。
import { createStore } from 'redux';
const store = createStore(fn);
const action = {
type: 'ADD',
value: '新数据'
}
store.dispatch(action)
store.dispatch接受一个 Action 对象作为参数,将它发送出去。
Reducer
Store收到Action后,必须给一个新的State,这样View才会更新。这种计算过程叫做Reducer。
Reducer是一个函数,接受State、Action作为参数,返回一个新的State。
const reducer = (state = 0, action)=>{
switch (action.type) {
case 'ADD':
return state + 1
case 'DEL':
return state - 1
default:
return state;
}
}
const store = createStore(reducer)
由于Reducer是纯函数,它里面的State都是一样的,这样View也是一样的,所以Reducer函数里面不能改变State,必须返回一个新的State。
function reducer(state, action) {
return Object.assign({}, state);
}