简单实现redux

//////////////redux
export function createStore(reducer, enhancer) {
	// enhancer为applyMiddleware的返回值
	if (enhancer) {
		return enhancer(createStore)(reducer)
	}

	let currentState = undefined
	let currentListener = []

	function getState() {
		return currentState
	}
	function dispatch(action) {
		currentState = reducer(currentState, action)
		currentListener.map((listener) => listener())
	}
	function subscribe(listener) {
		currentListener.push(listener)
	}

	dispatch({ type: '@INIT/REDUX-KKB' })

	return {
		getState,
		dispatch,
		subscribe,
	}
}

export function applyMiddleware(...middlewares) {
	return (createStore) => (...args) => {
		const store = createStore(...args)
		let dispatch = store.dispatch
		const middleApi = {
			getState: store.getState,
			dispatch,
		}
		const middlewaresChain = middlewares.map((middleware) => middleware(middleApi))
		dispatch = compose(...middlewares)(dispatch)
		return {
			...store,
			dispatch
		}
	}
}

function compose(...funcs) {
	if (funcs.length === 0) {
		return (arg) => arg
	}
	if (funcs.length === 1) {
		return funcs[0]
	}

	return funcs.reduce((a, b) => (...args) => a(b(...args))
}


///////////////////middleware
export function logger({ getState, dispatch }) {
	return (dispatch) => (action) => {
		console.log(action.type + ' 执行了')
		return dispatch(action)
	}
}

export function thunk({ getState, dispatch }) {
	return (dispatch) => (action) => {
		// action  可以是对象 或者是函数   不同的对象操作的方式不同
		if (typeof action === 'function') {
			return action(dispatch, getState)
		} else {
			return dispatch(action)
		}
	}
}
posted @ 2020-11-10 21:12  MarkJacobs  阅读(73)  评论(0)    收藏  举报