用npm安装redux,看目录结构
npm install redux
找到src目录
* index.js
: redux主文件,主要对外暴露核心api
* createStore.js
: createStore
方法的定义
* utils
: applyMiddleware、combineReducers、bindActionCreators为redux的核心方法,pick、mapValue、compose为普通的工具函数
├── createStore.js
├── index.js
└── utils
├── applyMiddleware.js
├── bindActionCreators.js
├── combineReducers.js
├── compose.js
├── isPlainObject.js
├── mapValues.js
└── pick.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
};
createStore.js
先翻译一下createStore方法的注释
/**
* Creates a Redux store that holds the state tree.
* The only way to change the data in the store is to call `dispatch()` on it.
*
* There should only be a single store in your app. To specify how different
* parts of the state tree respond to actions, you may combine several reducers
* into a single reducer function by using `combineReducers`.
*
* @param {Function} reducer A function that returns the next state tree, given
* the current state tree and the action to handle.
*
* @param {any} [preloadedState] The initial state. You may optionally specify it
* to hydrate the state from the server in universal apps, or to restore a
* previously serialized user session.
* If you use `combineReducers` to produce the root reducer function, this must be
* an object with the same shape as `combineReducers` keys.
*
* @param {Function} enhancer The store enhancer. You may optionally specify it
* to enhance the store with third-party capabilities such as middleware,
* time travel, persistence, etc. The only store enhancer that ships with Redux
* is `applyMiddleware()`.
*
* @returns {Store} A Redux store that lets you read the state, dispatch actions
* and subscribe to changes.
*/
创建一个redux store来管理状态树,如果你想改变状态树上的数据,只能通过调用dispatch发起一个action。在你的web app中,有且只能有一个store。为了说明状态树对action的响应,你应该把所有reducer通过一个combineReducers合并成一个单一的reducer函数(关于reducer可以参考我另一篇博文redux文档解读)。这里的参数reducer是一个接收当前状态树和action,返回下一个状态树的函数。参数preloadedState指的是初始状态,你可以将它与服务器的状态合并(比如ajax)。参数enhancer是store的加强功能,你可以选择通过第三的东西比如中间件、持久化等来加强store的功能,唯一一个使用方法是applyMiddleware()。函数返回值是一个redux store,可以让你读取状态树上的state,也可以让你dispatch action来改变状态。所以这个createStore方法, 传入了reducer、initialState,并返回一个store对象。
先看一下redux的初始化
// When a store is created, an "INIT" action is dispatched so that every
// reducer returns their initial state. This effectively populates
// the initial state tree.
dispatch({ type: ActionTypes.INIT })
当一个store创建的时候,会先dispatch一个action,type为ActionTypes.INIT(上文中有定义),这时候reducer会把他们初始的state返回,构成了初始的状态树
再来看一下比较核心的dispatch方法
/**
* Dispatches an action. It is the only way to trigger a state change.
*
* The `reducer` function, used to create the store, will be called with the
* current state tree and the given `action`. Its return value will
* be considered the **next** state of the tree, and the change listeners
* will be notified.
*
* The base implementation only supports plain object actions. If you want to
* dispatch a Promise, an Observable, a thunk, or something else, you need to
* wrap your store creating function into the corresponding middleware. For
* example, see the documentation for the `redux-thunk` package. Even the
* middleware will eventually dispatch plain object actions using this method.
*
* @param {Object} action A plain object representing “what changed”. It is
* a good idea to keep actions serializable so you can record and replay user
* sessions, or use the time travelling `redux-devtools`. An action must have
* a `type` property which may not be `undefined`. It is a good idea to use
* string constants for action types.
*
* @returns {Object} For convenience, the same action object you dispatched.
*
* Note that, if you use a custom middleware, it may wrap `dispatch()` to
* return something else (for example, a Promise you can await).
*/
function dispatch(action) {
if (!isPlainObject(action)) {
throw new Error(
'Actions must be plain objects. ' +
'Use custom middleware for async actions.'
)
}
if (typeof action.type === 'undefined') {
throw new Error(
'Actions may not have an undefined "type" property. ' +
'Have you misspelled a constant?'
)
}
if (isDispatching) {
throw new Error('Reducers may not dispatch actions.')
}
try {
isDispatching = true
currentState = currentReducer(currentState, action)
} finally {
isDispatching = false
}
var listeners = currentListeners = nextListeners
for (var i = 0; i < listeners.length; i++) {
listeners[i]()
}
return action
}
再翻译下注释,action只支持plain object,即用JSON形式定义的普通对象或者new Object()创建的简单对象。如果想dipatch一个Promise,一个thunk,你需要包装你的store create函数。可以看一看redux-thunk的文档,当然最后middleware还是使用这个方法diapatch了plain object。action用来表示改变的是什么,可以把action序列化, 便于记录。action必须有一个type属性,而且这个属性不能是undefined。最好是把action的属性赋值为大写的字符串常量。
dispatch主要是几个判断,action和action.type的判断,当dipatch的时候,改变函数内的全局变量isDispatching,然后把currentState修改为reducer返回的state,最后调用subscribe中传入的回调函数也就是监听器listener。
下面讲一下subscribe函数
/**
* Adds a change listener. It will be called any time an action is dispatched,
* and some part of the state tree may potentially have changed. You may then
* call `getState()` to read the current state tree inside the callback.
*
* You may call `dispatch()` from a change listener, with the following
* caveats:
*
* 1. The subscriptions are snapshotted just before every `dispatch()` call.
* If you subscribe or unsubscribe while the listeners are being invoked, this
* will not have any effect on the `dispatch()` that is currently in progress.
* However, the next `dispatch()` call, whether nested or not, will use a more
* recent snapshot of the subscription list.
*
* 2. The listener should not expect to see all state changes, as the state
* might have been updated multiple times during a nested `dispatch()` before
* the listener is called. It is, however, guaranteed that all subscribers
* registered before the `dispatch()` started will be called with the latest
* state by the time it exits.
*
* @param {Function} listener A callback to be invoked on every dispatch.
* @returns {Function} A function to remove this change listener.
*/
function subscribe(listener) {
if (typeof listener !== 'function') {
throw new Error('Expected listener to be a function.')
}
var isSubscribed = true
ensureCanMutateNextListeners()
nextListeners.push(listener)
//返回一个解绑函数
return function unsubscribe() {
if (!isSubscribed) {
return
}
isSubscribed = false
ensureCanMutateNextListeners()
//通过闭包拿到listener的值
var index = nextListeners.indexOf(listener)
//在listeners数组中除去这个lisnter
nextListeners.splice(index, 1)
}
}
这里调用了ensureCanMutateNextListeners方法
//初始化监听器数组
var currentListeners = []
var nextListeners = currentListeners
function ensureCanMutateNextListeners() {
if (nextListeners === currentListeners) {
nextListeners = currentListeners.slice()
}
}
添加一个变化监听器,listener是我们调用时传入的回调函数,listener会在action被dispatch之后被调用,你可以在回调函数listener里调用 getState() 来拿到当前 state。
如果需要解绑这个变化监听器,执行 subscribe 返回的函数即可。在实际使用中:
function handleChange(){
store.getState()...
}
let unsubscribe = store.subscribe(handleChange)
unsubscribe()
接下来是replaceReducer
/**
* Replaces the reducer currently used by the store to calculate the state.
*
* You might need this if your app implements code splitting and you want to
* load some of the reducers dynamically. You might also need this if you
* implement a hot reloading mechanism for Redux.
*
* @param {Function} nextReducer The reducer for the store to use instead.
* @returns {void}
*/
function replaceReducer(nextReducer) {
if (typeof nextReducer !== 'function') {
throw new Error('Expected the nextReducer to be a function.')
}
currentReducer = nextReducer
dispatch({ type: ActionTypes.INIT })
}
替换 store 当前用来计算 state 的 reducer,并且dispatch初始化的action。最后返回的store对象,具有dispatch,subscribe,getState,replaceReducer方法
return {
dispatch,
subscribe,
getState,
replaceReducer
};
combineReducers.js
先看核心的combineReducers
/**
* Turns an object whose values are different reducer functions, into a single
* reducer function. It will call every child reducer, and gather their results
* into a single state object, whose keys correspond to the keys of the passed
* reducer functions.
*
* @param {Object} reducers An object whose values correspond to different
* reducer functions that need to be combined into one. One handy way to obtain
* it is to use ES6 `import * as reducers` syntax. The reducers may never return
* undefined for any action. Instead, they should return their initial state
* if the state passed to them was undefined, and the current state for any
* unrecognized action.
*
* @returns {Function} A reducer function that invokes every reducer inside the
* passed object, and builds a state object with the same shape.
*/
export default function combineReducers(reducers) {
var reducerKeys = Object.keys(reducers)
var finalReducers = {}
for (var i = 0; i < reducerKeys.length; i++) {
var key = reducerKeys[i]
if (process.env.NODE_ENV !== 'production') {
if (typeof reducers[key] === 'undefined') {
warning(`No reducer provided for key "${key}"`)
}
}
if (typeof reducers[key] === 'function') {
finalReducers[key] = reducers[key]
}
}
var finalReducerKeys = Object.keys(finalReducers)
if (process.env.NODE_ENV !== 'production') {
var unexpectedKeyCache = {}
}
var sanityError
try {
// 对所有的子reducer 做一些合法性断言
assertReducerSanity(finalReducers)
} catch (e) {
sanityError = e
}
return function combination(state = {}, action) {
if (sanityError) {
throw sanityError
}
if (process.env.NODE_ENV !== 'production') {
var warningMessage = getUnexpectedStateShapeWarningMessage(state, finalReducers, action, unexpectedKeyCache)
if (warningMessage) {
warning(warningMessage)
}
}
var hasChanged = false
var nextState = {}
for (var i = 0; i < finalReducerKeys.length; i++) {
var key = finalReducerKeys[i]
var reducer = finalReducers[key]
var previousStateForKey = state[key]
var nextStateForKey = reducer(previousStateForKey, action)
if (typeof nextStateForKey === 'undefined') {
var errorMessage = getUndefinedStateErrorMessage(key, action)
throw new Error(errorMessage)
}
nextState[key] = nextStateForKey
hasChanged = hasChanged || nextStateForKey !== previousStateForKey
}
return hasChanged ? nextState : state
}
}
先翻译下注释,先将一个reducers对象(value为不同的reducer函数),转化成唯一一个reducer函数,它可以调用原来的每一个reducer函数,并且将他们的结果合并到一个单一的状态对象。调用这个函数只需要使用es6的语法import即可。此外这个函数永远不会返回undefined,redux 首次执行时,state 为 undefined,它将会返回我们设置的初始state。
const initialState = {
...
};
//使用es6的默认值语法
function todoApp(state = initialState, action) {
...
return state
}
而为什么我们之前将reducer分解为多个子reducer函数,是为了对不同的状态对应相应的reducer,并且更新时使用
//Object.assign实现局部更新,只对state的变化部分进行更新
return Object.assign({}, todos, {
completed: !todos.completed
})
从combineReducers的代码上看,先是使用finalReducers对象对reducers对象中的键值对进行保存,遍历reducers对象,检查其中的value值是否为函数,是函数的话加入finalReducers对象, 当key值为undefined的时候,非生产环境会提示警告。assertReducerSanity函数检查我们是否在子reducer函数中定义了initialState。finalReducers的对象key为reducer函数名,value为reducer函数。所以遍历这个对象,对应每一个state(下面场景中的state.todos,state.filter)对应的reducer函数进行执行,最后将结果保存到nextState。
调用这个函数的场景如下:
function TodoReducer(state, action) {}
function FilterReducer(state, action) {}
var finalReducers = redux.combineReducers({
todos: TodoReducer,
filter: FilterReducer
});
bindActionCreator.js
/**
* Turns an object whose values are action creators, into an object with the
* same keys, but with every function wrapped into a `dispatch` call so they
* may be invoked directly. This is just a convenience method, as you can call
* `store.dispatch(MyActionCreators.doSomething())` yourself just fine.
*
* For convenience, you can also pass a single function as the first argument,
* and get a function in return.
*
* @param {Function|Object} actionCreators An object whose values are action
* creator functions. One handy way to obtain it is to use ES6 `import * as`
* syntax. You may also pass a single function.
*
* @param {Function} dispatch The `dispatch` function available on your Redux
* store.
*
* @returns {Function|Object} The object mimicking the original object, but with
* every action creator wrapped into the `dispatch` call. If you passed a
* function as `actionCreators`, the return value will also be a single
* function.
*/
export default function bindActionCreators(actionCreators, dispatch) {
if (typeof actionCreators === 'function') {
return bindActionCreator(actionCreators, dispatch)
}
if (typeof actionCreators !== 'object' || actionCreators === null) {
throw new Error(
`bindActionCreators expected an object or a function, instead received ${actionCreators === null ? 'null' : typeof actionCreators}. ` +
`Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?`
)
}
var keys = Object.keys(actionCreators)
var boundActionCreators = {}
for (var i = 0; i < keys.length; i++) {
var key = keys[i]
var actionCreator = actionCreators[key]
if (typeof actionCreator === 'function') {
boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
}
}
return boundActionCreators
}
翻译下注释,将一个对象(value是action的creator),变成一个key相同,但是每个函数都被包进了dispatch。这是一个快捷方式,总比你调用store.dispatch(MyActionCreators.doSomething())快得多。参数dispatch就是createStore扔出来的store的dispatch方法。
这个js的核心是bindActionCreator函数
function bindActionCreator(actionCreator, dispatch){
//...args是actionCreator和dispatch,相当于给actionCreator函数再包裹了一层dispatch
return (...args) => dispatch(actionCreator(...args))
}
可以通过一个例子来理解
var addTodo = function(text){
return {
type: 'add_todo',
text: text
};
};
var actions = redux.bindActionCreators({
addTodo: addTodo
}, store.dispatch);
//相当于dispatch一个{ type: 'add_todo', text: 'xx' }
actions.addTodo('xx');
applyMiddleware.js
/**
* Creates a store enhancer that applies middleware to the dispatch method
* of the Redux store. This is handy for a variety of tasks, such as expressing
* asynchronous actions in a concise manner, or logging every action payload.
*
* See `redux-thunk` package as an example of the Redux middleware.
*
* Because middleware is potentially asynchronous, this should be the first
* store enhancer in the composition chain.
*
* Note that each middleware will be given the `dispatch` and `getState` functions
* as named arguments.
*
* @param {...Function} middlewares The middleware chain to be applied.
* @returns {Function} A store enhancer applying the middleware.
*/
export default function applyMiddleware(...middlewares) {
return (createStore) => (reducer, preloadedState, enhancer) => {
var store = createStore(reducer, preloadedState, enhancer)
var dispatch = store.dispatch
var chain = []
var middlewareAPI = {
getState: store.getState,
dispatch: (action) => dispatch(action)
}
chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch)
return {
...store,
dispatch
}
}
}
继续先翻译,创建一个store的增强件,它可以引进一些中间件给dispatch方法,这个对于很多任务都很方便,比如说异步的action,或者记录每一个action。
再结合官方文档对middleware的解释,这里提供的是action被发起后,到达reducer之前的扩展点,你可以利用 Redux middleware 来进行日志记录、创建崩溃报告、调用异步接口或者路由等等。在调用store.dispatch前后想记录被发起的action和新的state,第一种方法如下:
store.dispatch(addTodo('xx'));
//第一种方法
let action = addTodo('xx');
console.log('dispatching', action)
store.dispatch(action)
console.log('next state', store.getState())
//第二种方法,封装
function dispatchAndLog(store, action) {
console.log('dispatching', action)
store.dispatch(action)
console.log('next state', store.getState())
}
dispatchAndLog(store, addTodo('Use Redux'))
//第三种方法,用一个中间变量保存store.dispatch
let next = store.dispatch
store.dispatch = function dispatchAndLog(action){
console.log('dispatching', action)
let result = next(action)
console.log('next state', store.getState())
return result
}
//第四种方法
function logger(store) {
let next = store.dispatch
// 我们之前的做法:
// store.dispatch = function dispatchAndLog(action)..
return function dispatchAndLog(action) {
console.log('dispatching', action)
let result = next(action)
console.log('next state', store.getState())
return result
}
}
function applyMiddlewareByMonkeypatching(store,middlewares){
middlewares = middlewares.slice()
middlewares.reverse()
// 在每一个 middleware 中变换 dispatch 方法。
middlewares.forEach(middleware =>
store.dispatch = middleware(store)
)
}
applyMiddlewareByMonkeypatching(store, [ logger, crashReporter ])
第四种方法在middleware的数组内部的回调函数中改变了store.dispatch方法。那么为什么我们要替换原来的dispatch呢,主要是因为每一个middleware都想使用包装过的store.dispatch,在这边例子中就是我们包装过的日志记录函数。如果 applyMiddlewareByMonkeypatching 方法中没有在第一个 middleware 执行时立即替换掉 store.dispatch,那么 store.dispatch 将会一直指向原始的 dispatch 方法。也就是说,第二个 middleware 依旧会作用在原始的 dispatch 方法。
但是,还有另一种方式来实现这种链式调用的效果。可以让 middleware 以方法参数的形式接收一个 next() 方法,而不是通过 store 的实例去获取。
function logger(store) {
return function wrapDispatchToAddLogging(next) {
return function dispatchAndLog(action) {
console.log('dispatching', action)
let result = next(action)
console.log('next state', store.getState())
return result
}
}
}