标签（空格分隔）： redux javascirpt createStore
导语：
最近在看 redux，也看了源码，于是就写一点东西来记录一下这个过程。
先看一下redux源码的目录结构
src
-utils
: applyMiddleware.js
bindAction.js
combineReducers.js
compose.js
isPlainObject.js
mapValues.js
pick.js
createStore.js
index.js
redux的代码量不多，结构也比较清晰，让我们先从index.js开始。
index.js的内容
import createStore from './createStore';
import combineReducers from './utils/combineReducers';
import bindActionCreators from './utils/bindActionCreators';
import applyMiddleware from './utils/applyMiddleware';
import compose from './utils/compose';
export {
createStore,
combineReducers,
bindActionCreators,
applyMiddleware,
compose
};
index.js export了5个方法，依次为
- createStore 可以进行如创建 store， 获取当前的 state， 注册store的事件， dispatch action 等 store 相关操作。
- combineReducers 可以将多个 reducer 组合为一个 root reducer。
- bindActionCreators 将store.dispatch 和 action creater 组合在一起，简化了调用。
- applyMiddleware 可以为redux增加的中间件，类似express的中间件，比如添加一个log。
- compose
让我们先看一看 createStore.js 是个什么鬼。
createStore.js的代码结构如下（不是全部的代码，也没必要都写出来）：
...
export default function createStore(reducer, initialState) {
...
var currentReducer = reducer; //这个是 store 绑定的 reducer。
var currentState = initialState; //在这里存储 state。
var listeners = []; //这里放着所有的监听函数。
var isDispatching = false;
//获取当前的state。
function getState() { ... }
//注册一个监听的方法，当state改变时会执行所有的listeners。
function subscribe(listener) { ... }
//dispatch a action。
function dispatch(action) { ... }
//替换reducer。
function replaceReducer(nextReducer) { ... }
return {
dispatch,
subscribe,
getState,
replaceReducer
};
}
redux 是一个状态管理器， store 就是存储状态的地方，有几个方法用于交互， createStore 是用来创建 stroe 的, 接受两个参数：
- reducer 是一个形如 (previoustState, action) => nextState 的 pure function，可以是一个 reducer，也可以是多个 reducer 经过 combineReducer 之后的结果。
- initialState 一个 plain Object，可以来自一个json文件，服务器端渲染时的初始数据等。
crreateStore 将 reducer 赋值给 currentReducer， 将 initialState 赋值给 currentState。 当调用 store.dispatch(action) 时，currentReducer 根据 currentState 和 action 生成一个新的 state，然后执行 listeners 中的方法， 在这些方法中使用 getState() 获取最新的 state， 然后执行下一步操作。
View->Reducer: store.dispatch(action)
Reducer->Store: reducer(state, action) => state
Store-->View: listens.forEach( listener => listener() )
让我们来具体看一下各个方法的代码。
getState 就是 return currentState。
function getState() {
return currentState;
}
subscribe 向 listeners 中添加一个 listener（类型是function），当 store.dispatch(action) 发生时会执行所有的 listener， 在其中执行 store.getState() 就可以获取最新的 state 了。
subscribe 返回一个删除当前 listener 的方法。
function subscribe(listener) {
listeners.push(listener);
return function unsubscribe() {
var index = listeners.indexOf(listener);
listeners.splice(index, 1);
}
}
//添加一个 listener， 打印当前的 state。
let consoleState = store.subscribe( function(){
console.log(store.getState());
})
//删除这个 listener
consoleState()
dispatch(action) 方法中执行 currentReducer(currentState, action) 得到一个新的 state，然后执行所有的 listeners。
function dispatch(action) {
// action 必须是一个 plainObject。
if (!isPlainObject(action)) {throw new Error(...)}
// action.type 要有一个 type 属性，来表明 action 的类型。
if (typeof action.type === 'undefined') {throw new Error(...)}
// 不能在 reducer 中 dispath an action。
if (isDispatching) {throw new Error(...)}
try{
isDispatching = true;
//得到一个新的state
currentState = currentReducer(currentState, action);
} finally {
isDispatching = false;
}
//执行所有的listener
listeners.slice().forEach(listener => listener());
return actioin;
}
replaceReducer 用于替换 currentReducer
function replaceReducer(nextReducer) {
currentReducer = nextReducer;
dispatch({type: ActionTypes.INIT});
}
dispatch({type: ActionTypes.INIT}); 使用 reducer 的 initial state 初始化 store。
dispatch({type: ActionTypes.INIT});
return {
dispatch,
subscribe,
getState,
replaceReducer
};
这就是 createStore 的基本代码结构，此外源码中还有一个常量, 是 redux 内置的一个 action。
export var ActionTypes = {
INIT: '@@redux/INIT'
};
让我们来看一点例子，
//先来两个常量
const PUSH = 'PUSH';
const POP = 'POP';
//这是一个action，叫push
let push = {
type: PUSH,
data: 'HELLO'
}
//这是一个action，叫pop
let pop = {
type: POP
}
//这是一个reducer
let reducer = function(state, action) {
switch (action.type) {
case PUSH:
return state.concat(action.data)
case POP:
return state.slice(0, -1)
default:
return state
}
}
//再来一个rducer
let anotherReducer = function(state, action) {
switch (action.type) {
case PUSH:
return state.concat('WORLD')
default:
return state
}
}
//--------------------------------------------------
/**
* 先来创建一个 store，直接调用 createStore 方法，传递一个 reducer 和一个 state。
* reducer 是一个函数，形式是 (state, action) => action。
* state 可以是一个对象，数组，或者一个变量也可以。
*/
const store = createStore(reducer, []);
//来看一下当前的state
store.getState() //返回[]。
//执行一次dispatch后state会发生变化
store.dispatch(push)
store.getState() //返回['HELLO']
//再次执行dispatch
store.dispatch(push)
store.getState() //返回['HELLO', 'HELLO']
store.dispatch(pop)
store.getState() //返回['HELLO']
//添加一个listener
let unsubscribe = store.subscribe(function(){
console.log('我是一个listener， 我被执行了')
})
//dispatch一个不会改变 state 的 action，因为在 reducer 没有定义 type 为 UNKOWN 的处理
store.dispatch({type: 'UNKOWN'}) //console 输出我是一个listener， 我被执行了
//删除这个listener
unsubscribe()
store.dispatch({type: 'UNKOWN'}) //console 没有输出
//替换一个reducer
store.replaceReducer(anotherReducer)
store.dispatch(push)
store.getState() //返回['HELLO', 'WORLD']
//--------------------------------------------------
总结
createStore 会创建一个 store，store 中保持着一个 state ，一个 reducer 和一组 listener， 可以使用 store.subscribe(listener) 添加一个 listener， 也可以删除这个 listener。 每当执行 store.dispatch(action) 的时候，就会执行 reducer， reducer 返回一个新的 state（不是修改原来的 state）， 替换到原来的 state， 然后执行所有的 listener， 告知 state 已经更新了。
