前面有一个Redux,咱们去撩(聊)一下它。

什么是Redux?

管理整个前端项目(单页应用)全部的状态数据,统一把整个应用的状态存到一个地方(store),保存成一个状态树,修改数据须要派发(dispatch)一个动做(action)通知store修改。组件经过订阅(subscribe)修改事件,获取最新数据来修改自身状态。javascript

三大原则

  1. 整个应用的state存储在store中,有且只存在一个store。
  2. store里面的state是只读的,惟一改变state的方法就是派发(dispatch)一个动做(action)。
  3. 纯函数(reducer)修改state,每次返回一个新的state,不能直接修改原对象。

为何要使用Redux(应用场景)

  1. 单页应用复杂,管理不断变化的state很是困难。
  2. 非父子关系组件通讯。
  3. 全部页面的公用状态。

从源码出发,整个redux源码,总共导出5个函数,和一个__DO_NOT_USE__ActionTypes(默认的action,全部action类型不能重复,下面会细撩这个点),那么下面就来细细的撩一下5个函数。前端

1.createStore(reducer, preloadedState, enhancer)

想要使用redux,首先就是建立一个全局的store(固然是惟一的一个),就得调用这个函数(createStore)。该函数接收三个参数。store里面保存了全部的数据,能够看作一个容器。java

传入reducerinitState建立store。react

store返回给钥匙,修改器,电话git

有了钥匙就能随时取数据,若是须要修改数据就得经过修改器,如须要须要知道数据何时修改了,就打一个电话给store,告诉它,数据修改好了给我说。github

先来看看它返回的函数:

getState() => currentState

返回当前的store状态树,包含全部state。这里在读源码的时候发现一个疑问。 redux

这里返回的是本来的对象,那么外部拿到这个state,不是能够直接修改吗?这样违背了 只读。为何不返回一个新引用对象,防止此操做。

带着这个疑问,给Redux提了一个PR. 获得回复:app

Yes - getState() just returns whatever the current state value is. It's up to you to avoid accidentally mutating it.ide

(译文)是的,getState()只返回当前状态值。你要避免不当心把它弄乱。函数

也就是说在这里须要注意一下,getState()返回的值不能直接修改,不然你将陷入深渊

subscribe(listener) => unsubscribe()

传入一个函数用来监听store发生变化,一旦store发生了变化,将循环执行全部的监听函数。调用该函数还返回了一个取消监听的函数。调用返回的函数,则取消该listener监听。

dispatch(action) => action

dispatch接收一个action。在函数内部会把全部的reducer执行一遍并把当前的state和action传入reducer,而后再执行全部的监听函数。从源码中截了一段出来:

const dispatch = (action) => {
	currentState = currentReducer(currentState, action);
	
	const listeners = (currentListeners = nextListeners)
    for (let i = 0; i < listeners.length; i++) {
      const listener = listeners[i]
      listener()
    }
    
    return action
}
复制代码
action

一个对象,必须包含一个type,表示所要发生的动做,其余属性自由设置,社区中有一个规范,把其余全部数据放入payload中,通常开发中会写一个函数来生成action。

function login(){
		retrun {
			type: 'LOGIN',
			payload: {
				username: 'xxx',
				passworld: 'xxxx'
			}
		}
	}
复制代码

replaceReducer(nextReducer)

传入新的reducer,替换以前的reducer,而且派发一个ActionType为REPLACE的action。

再来看看它接收的三个参数

reducer

一个纯函数,接收当前的state和action作为参数,返回新的state。

Store 收到 Action 之后,会调用reducer,必须给出一个新的 State,这样 Store里的数据才会发生变化。

编写一个简单的reducer

const reducer = function (state, action) {
	switch(action.type){
		case 'TYPE':
  			return {...state, newState}
  		default:
  			return state;
	}
};	
复制代码

preloadedState

源码里面的参数名叫这个,其实我更愿意叫它initState,初始化的状态,为何源码不叫initState呢?由于不许确,在源码里会默认发送一个type为init的dispatch(),这个时候走到reducer里面(看看上面的reducer代码),state若是在这个时候设置一个默认值,好比:

const reducer = function (state = {list: []}, action) {
	switch(action.type){
		case 'TYPE':
  			return {...state, newState}
  		default:
  			return state;
	}
};	
复制代码

这个时候就默认返回了{list: []},就给出了一个真正的initState。

enhancer

用来配合快速建立中间件的。


上面提到的__DO_NOT_USE__ActionTypes,就是2个actionType:

  • @@redux/INIT: 用来内部发送一个默认的dispatch
  • @@redux/REPLACE: 用来替换reducer

2.bindActionCreators(actionCreators, dispatch) => boundActionCreators

遍历全部生成action函数并执行,返回被dispatch包裹的函数,可供直接调用派发一个请求。

actionCreators

该参数为一个对象,包含生成action的函数,例如:

const actionCreators = {
	login: () => {
		return {
			type: 'LOGIN',
			payload: {
				username: 'xxx',
				passworld: 'xxxx'
			}
		}
	},
	logout: () => {
		retrun {
			type: 'LOGOUT'
		}
	}	
}
复制代码

若是传入一个函数,则执行函数获得action,返回一个dispatch(action)。

dispatch

这里就是createStore所返回的dispatch


该函数返回对象或函数(根据传入的actionCreators来决定),能够直接调用xx.login()去派发一个登录。

3.combineReducers(reducers)

在项目开发中,须要分模块写reducer,利用该函数合并多个reducer模块。传入一个reducer集合。

a.js
export (state = {list: []}, action) => {
	switch (action.type) {
	    case "LIST_CHANGE":
	        return { ...state, ...action.payload };
	    default:
	        return state;
	}
}

b.js
export (state = {list: []}, action) => {
	switch (action.type) {
	    case "LIST":
	        return { ...state, ...action.payload };
	    default:
	        return state;
	}
}

combineReducers.js
import a from './a';
import b from './b';

combineReducers({
	a: a,
	b: b
})
复制代码

ab都有list这个state,可是他们并不相关,要把他们分开使用,就得用combineReducers去合并。

下面简单实现了该函数:

function combineReducers(reducers) {
    return (state = {}, action) => {
        return Object.keys(reducers).reduce((currentState, key) => {
            currentState[key] = reducers[key](state[key], action);
            return currentState;
        }, {})
    };
}
复制代码

4.compose

能够说是js中函数式中很重要的方法,把一堆函数串联起来执行,从右至左执行(也就是倒序),函数的参数是上一个函数的结果。看一个使用例子:

const fn1 = (val) => val + 'fn1';

const fn2 = (val) => val + 'fn2';

const fn3 = (val) => val + 'fn3';

const dispatch = compose(fn1, fn2, fn3);

console.log(dispatch('test'));
复制代码

最终输出结果testfn3fn2fn1

test传给fn3当参数,fn3的返回值给了fn2....

compose.js

function compose(...fns){
    if(fns.length==1) return fns[0];
    return fns.reduce((a,b)=>(...args)=>a(b(...args)));
}
复制代码

5.applyMiddleware

该函数是用来添加中间件,在修改数据的时候作一些其余操做,redux经过改造dispatch来实现中间件.

使用中间件

const middleware = applyMiddleware(logger);
复制代码

须要传入中间件函数,能够是多个函数,依次传入,在applyMiddleware里面用到了compose,因此咱们传入的函数的从右至左依次执行的,这里须要注意一下。

const createStoreWithMiddleware = middleware(createStore);
复制代码

由于中间件是经过改造dispatch来实现,因此须要把建立store的方法传进去。

const store = createStoreWithMiddleware(reducer, preloadedState)
复制代码

这里再传入createStore须要接收的参数,返回store对象。

实现一个logger中间件

const logger = function({dispatch, getState}){
   return function(next){
      return function(action){
	        console.log('oldState',getState());
	        next(action); // 真实派发动做
	        console.log('newState',getState());
	    }
    }
}
复制代码

首先middleware会把未改造的dispatchgetState传入进来,这里的next至关于dispatch,去派发一个真正的修改数据动做。

源码贴上:

export default function applyMiddleware(...middlewares) {
  return createStore => (...args) => {
    const store = createStore(...args)

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args)
    }
    const chain = middlewares.map(middleware => middleware(middlewareAPI))
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}
复制代码

middlewareAPI是存储未改造的方法,compose上面讲过,第一个参数传入的就是dispatch,返回的一个改造后dispatch就是经过compose事后的一个函数,会依次执行。

最后

一些学习心得,若有不对欢迎指正
个人github 谢谢你阅读个人文章

相关文章
相关标签/搜索