Redux
基本概念和API
1、Store
Store就是保存数据的地方,你可以把它看成一个容器。整个应用智能有一个Store。
Redux提供createStore这个函数,用来生成Store
import { createStore } from 'redux';
const store = createStore(fn);
上面代码中,createStore函数接受另一个函数作为参数,返回新生成的Store对象
2、State
Store对象包含所有数据。如果想得到某个时点的数据,就要对Store生成快照。这种时点的数据集合,就叫做State。
当前时刻的State,可以通过store.getState()拿到。
import { createStore } from 'redux';
const store = createStore(fn);
const state = store.getState();
Redux规定,一个State对应一个View。只要State相同,View就相同。你知道State,就知道View是什么样,反之亦然。
3、Action
State的变化,会导致View的变化。但是,用户接触不到State,只能接触到View。所以,State的变化必须是View导致的。Action就是View发出的通知,表示State应该要发生变化了。
Action是一个对象。其中的type属性是必须的,表示Action的名称。其他属性可以自由设置,社区有一个规范可以参考。
const action = {
type: 'ADD_TODO',
payload: 'Learn Redux'
};
上面代码中,Action的名称是ADD_TODO,它携带的信息是字符串Learn Redux。
可以这样理解,Action描述当前发生的事情。改变State的唯一办法,就是使用Action。它会运送数据到Store。
4、Action Creator
View要发送多少种信息,就会有多少种Action。如果都手写,会很麻烦。可以定义一个函数来生成Action,这个函数就叫Action Creator。
const ADD_TODO = '添加 TODO';
function addTodo(text) {
return {
type: ADD_TODO,
text
}
}
const action = addTodo('Learn Redux');
上面代码中,addTodo函数就是一个Action Creator
5、store.dispatch()
store.dispatch()是View发出Action的唯一方法。
import { createStore } from 'redux';
const store = createStore(fn);
store.dispatch({
type: 'ADD_TODO',
payload: 'Learn Redux'
});
上面代码中,store.dispatch接受一个Action对象作为参数,将它发送出去。结合Action Creator,这段代码可以改写如下。
store.dispatch(addTodo('Learn Redux'));
6、Reducer
Store收到Action以后,必须给出一个新的State,这样View才会发生变化。这种State的计算过程就叫做Reducer。
Reducer是一个函数,它接受Action和当前State作为参数,返回一个新的State。
const reducer = function (state, action) {
// ...
return new_state;
};
整个应用的初始状态,可以作为State的默认值。下面是一个实际的例子。
const defaultState = 0;
const reducer = (state = defaultState, action) => {
switch (action.type) {
case 'ADD':
return state + action.payload;
default:
return state;
}
};
const state = reducer(1, {
type: 'ADD',
payload: 2
});
上面代码中,reducer函数收到名为ADD的Action以后,就返回一个新的State,作为加法的计算结果。其他运算的逻辑(比如减法),也可以根据Action的不同实现。
实际应用中,Reducer函数不用像上面这样手动调用,store.dispatch方法会触发Reducer的自动执行。为此,Store需要知道Reducer函数,做法就是在生成Store的时候,将Reducer传入createStore方法。
import { createStore } from 'redux';
const store = createStore(reducer);
上面代码中,createStore接受Reducer作为参数,生成一个新的Store。以后每当store.dispatch发送过来一个新的Action,就会自动调用Reducer,得到新的State。
为什么这个函数叫做Reducer呢?因为它可以作为数组的reduce方法的参数。请看下面的例子,一系列Action对象按照顺序作为一个数组。
const actions = [
{ type: 'ADD', payload: 0 },
{ type: 'ADD', payload: 1 },
{ type: 'ADD', payload: 2 }
];
const total = actions.reduce(reducer, 0); // 3
上面代码中,数组actions表示依次有三个Action,分辨是如0、加1和加2。数组的reduce方法接受Reducer函数作为参数,就可以直接得到最终的状态3。
7、纯函数
Reducer函数最重要的特征是,它是一个纯函数。也就是说,只要是同样的输入,必定得到同样的输出。
纯函数是函数式编程的概念,必须遵守以下一些约束
- 不得改写参数
- 不能调用系统 I/O 的API
- 不能调用Date.now()或者Math.random()等不纯的方法,因为每次会得到不一样的结果
由于Reducer是纯函数,就可以保证同样的State,必须得到同样的View。但也正因为这一点,Reducer函数里面不能改变State,必须返回一个全新的对象,请参考下面的写法
// State 是一个对象
function reducer(state, action) {
return Object.assign({}, state, { thingToChange });
// 或者
return { ...state, ...newState };
}
// State 是一个数组
function reducer(state, action) {
return [...state, newItem];
}
最好把State对象设成只读。你没法改变它,要得到新的State,唯一办法就是生成一个新的对象。这样的好处是,任何时候,与某个View对应的State总是一个不变的对象
8、store.subscribe()
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的实现
Store提供了三个方法。
- store.getState()
- store.dispatch()
- store.subscribe()
import { createStore } from 'redux';
let { subscribe, dispatch, getState } = createStore(reducer);
createStore方法还可以接受第二个参数,表示State的最初状态。
let store = createStore(todoApp, window.STATE_FROM_SERVER)
上面代码中,window.STATE_FROM_SERVER就是整个应用状态的初始值。注意,如果提供了这个参数,它会覆盖Reducer函数的默认初始值。
下面是createStore方法的一个简单实现,可以了解一下Store是怎么生成的。
const createStore = (reducer) => {
let state;
let listeners = [];
const getState = () => state;
const dispatch = (action) => {
state = reducer(state, action);
listeners.forEach(listener => listener());
};
const subscribe = (listener) => {
listeners.push(listener);
return () => {
listeners = listeners.filter(l => l !== listener);
}
};
dispatch({});
return { getState, dispatch, subscribe };
};